@charset "utf-8";
/* -----------H-ui前端框架-------------
* H-ui.css v3.1.12
* http://www.h-ui.net/
* Created & Modified by guojunhui
* Date modified 2019.02.18
*
* Copyright 2013-2019 北京颖杰联创科技有限公司 All rights reserved.
* Licensed under MIT license.
* http://opensource.org/licenses/MIT
*
*/
/*------------------------------------
结构目录：
  1. css reset重定义浏览器默认样式
  2. 框架
    2.1 响应式栅格系统
    2.2 响应式隐藏显示
  3. 基础CSS
    3.1 排版
      3.1.1  标题
      3.1.2  强调
      3.1.3  对齐
      3.1.4  定位
      3.1.5  浮动
	  3.1.6  文字单行溢出省略号
	  3.1.7  线条
      3.1.8  外边距
      3.1.9  内填充
      3.1.10 边框，css3圆角
      3.1.11 css3阴影
      3.1.12 行内分割竖线
      3.1.13 文字尺寸
      3.1.14 文字行距
      3.1.15 文字颜色
      3.1.16 文字颜色强调
      3.1.17 缩略语
      3.1.18 地址
      3.1.19 引用
      3.1.20 上标 下标
      3.1.21 内容样式
      3.1.22 列表
      3.1.23 描述
	  3.1.24 隐藏 显示
	  3.1.25 尺寸
    3.2 代码
    3.3 表格
    3.4 表单
      3.4.1 input,textarea 文本域 文本区域
      3.4.2 radio,checkbox 单选 多选
	  	3.4.2.1 jQuery.icheck.css
		3.4.2.2 Bootsrtap.Switch.css
      3.4.3 select 下拉框
      3.4.4 input-file 文件上传
	  3.4.5 spinner 控件
	  3.4.6 邮箱提示
      3.4.7 表单布局
	  3.4.8 表单验证
    3.5 按钮
    3.6 图片
    3.7 图标
    3.8 动画
  4. 组件
    4.1 按钮组
    4.2 导航
      4.2.1 导航条
      4.2.2 面包屑导航
      4.2.3 翻页导航
	  4.2.4 顶部导航
	  4.2.5 向导
	  4.2.6 竖向导向tab导航
	  4.2.7 横向tab
    4.3 菜单
      4.3.1 下拉菜单
      4.3.2 多级菜单
      4.3.3 树状菜单（暂无）
    4.4 幻灯片
      4.4.1 焦点图效果(自动播放，圆点控制)
      4.4.2 带缩略图效果
    4.5 选项卡
    4.6 便签与标号
    4.7 缩略图
    4.8 警告
    4.9 进度条 loading
    4.10 对话框 弹出层
    4.11 客服
    4.12 右侧悬浮工具
		4.12.1 返回顶部
		4.12.2 意见反馈
    4.13 分享
    4.14 面板
    4.15 案例
    4.16 滚动
    4.17 搜索
    4.18 广告
    4.19 标签
      4.19.1 标签输入效果
      4.19.2 标签混排效果
      4.19.3 tag云标签
    4.20 折叠
    4.21 遮罩条
    4.22 评论列表
	4.23 页脚
	4.24 星星评价
	4.25 tooltip效果
	4.26 popover效果
	4.27 datetimepicker日期插件
	4.28 sortable拖动
	4.29 ColorPicker 颜色控件
  5. 页面
    5.1 404页面
    5.2 博客列表页（暂无）
    5.3 博客详情页（暂无）
    5.4 关于我们页（暂无）
    5.5 帮助列表页（暂无）
    5.6 帮助详情页（暂无）

----------------------------------
CSS写作注意事项：
  1. 页面编码规范
    1.1. 统一使用 UTF-8 编码,用@charset "utf-8"指定页面编码。
    1.2. 全局字体设置：
         windows 7系统：微软雅黑 Arial；
         windows XP及以下：新宋体，宋体，Arial
         MAC默认字体：Helvetica Neue和Helvetica Hiragino Sans GB。
    1.3. 中文字体使用编码转换，请参阅下节“中文字体css编码转换”
    1.4. 推荐使用216web安全色
  2. 属性写在一行内，属性之间、属性名和值之间以及属性与“{}”之间应减少空格，去掉最后一个“;”，例如：.class{width:200px;height:100px}
  3. 属性的书写顺序：
    3.1. 按照元素模型由外及内，由整体到细节书写，大致分为五组：
      位置：position,left,right,float
      盒模型属性：display,margin,padding,width,height
      边框与背景：border,background
      段落与文本：line-height,text-indent,font,color,text-decoration,...
      其他属性：overflow,cursor,visibility,...
    3.2. 针对特殊浏览器的属性，应写在标准属性之前，例如：-webkit-box-shadow:;-moz-box-shadow:;box-shaow:;
  4. 带有前缀的属性，单独一行，通过缩进，让每个属性的值垂直对齐，方便编辑维护。
  5. 谨慎添加新的选择符规则，尤其不可滥用 id，尽可能继承和复用已有样式
  6. 选择符、属性、值均用小写（格式的颜色值除外），缩写的选择符名称须说明缩写前的全称，例如 .cl -> Clearfix
  7. 避免使用各种 CSS Hack，如需对 IE 进行特殊定义，请参阅下节“关于 CSS Hack 的说明”
  8. 勿使用冗余低效的 CSS 写法，例如：ul li a span{... }
  9. 慎用 !important
  10. 建议使用具有语义化的classname或id，请参阅下节“css 命名规范及对应的缩写”
  11.避免使用兼容性不好的使用滤镜
  12.开发过程中的未定事项，须用 [!] 标出，以便于后续讨论整理。
  13.注释格式，统一使用双斜杠加*。
  14.上下模块之间的间距统一使用下一个模块的margin-top来实现，好处是：如果没有下一个模块也不会多出一段空隙。
  15.hover，selected，disabled，current等具有特定意义的请勿直接占用。
  16.:link :visited :hover :active书写顺序 L-V-H-A，速记：LoVe（喜欢）HAte（讨厌）。
  17.不要使用 @import
----------------------------------
中文字体css编码转换
  微软雅黑   \5FAE\8F6F\96C5\9ED1  或 Microsoft YaHei
  黑体       \9ED1\4F53
  新宋体     \65b0\5b8b\4f53
  宋体       \5b8b\4f53
----------------------------------
关于 CSS Hack 的说明：
  1. _          IE6
  2. *          IE6/7
  3. !important IE7/Firefox
  4. *+         IE7
  5. \9         IE6/7/8
  6. \0         IE8
  7. 条件hack
      <!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]--> IE7以下版本
      <!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]--> IE7
      <!--[if IE 8]> <html class="no-js lt-ie9"><![endif]--> IE8
      <!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]--> IE8以上
----------------------------------
css 命名规范
  1. 内容优先,表现为辅
  2. css命名中英文对照
  current 当前    hover 悬停    selected 挑选   disabled 禁用   focus 得到焦点    blur 失去焦点   checked 勾选    success 成功    error 出错

  header(hd) 头部   content(cnt) 内容   title(tit) 标题   item 项目（条）    cell 单元   image/pic(img) 图片   text(txt) 文字    top 顶部    scrubber 时序菜单

  nav 导航    mainNav 主导航   subNav 子导航    topNav 顶部导航   breadcrumb 面包屑导航

  flink 友情链接    footer 尾    copyright 版权

  menu 菜单   submenu 子菜单   dropdown 下拉菜单

  searchBar 搜索条   search 搜索条    searchTxt 搜索框   searchBtn 搜索按钮    search_key 搜索词

  member 会员   ucenter 用户中心    loginBar 登陆条    login 登录    loginBtn 登录按钮   regsiter 注册按钮   btn-regsiter注册按钮    name 用户名    password 密码   nickname 昵称   mobilephone/mobile 手机    telephone/tel 电话   defaultavatar 默认头像

  hot 热点    news 新闻   banner/AD 广告    download 下载

  content 内容    title 标题    summary 摘要    time 时间

  share 分享    digg 顶    like 喜欢

  list/-list 列表   pList 图片列表    tList 文字列表    tpList 图文列表

  table 表格    row 行   column 列    gutter 间隔   viewport 视口

  tab 标签    tags 标签   scroll 滚动

  sidebar 侧边栏   column 栏目   section 区块    msg 提示信息    status 状态   vote 投票   tips 小技巧    guild 指南    note 注释

  icon- 图标    btn- 按钮

  goods 商品    goods-list 商品列表    goods-detail 商品详情    goods-info 商品信息

  tuan 团购   tuan-list 团购列表   tuan-detail  团购详情    tuan-info 团购信息

  transition 动画   shadow 阴影   fade 淡入淡出   flip 翻页效    slide 滑动    slideup 上滑动   slidedown 下滑动   turn 翻页   horizontal 水平   vertical 垂直   collapsible 折叠    corners 拐角    flow 流    reverse 反向    pop 弹窗

  count 总数/计数   plus 加号/正   minus 减号/负    controlgroup 控制组
----------------------------------
html命名规范：
  default/index.html    首页
  404.html              404错误页
  print.html            打印页
  header.html           页头
  footer.html           页脚
  sitemap.html          网站地图
  passport.html         通行证
  rank.html             排行榜
  roll.html             滚动新闻

  solution.html         解决方案
  joinus.html           加入我们
  partner.html          合作伙伴
  service.html          服务
  aboutus.html          关于我们
  contact.html          联系我们
  company.html          公司介绍
  organization.html     组织结构
  culture.html          企业文化
  strategy.html         发展策略
  honor.html            公司荣誉
  aptitudes.html        企业资质
  events.html           大事记
  business.html         商务合作
  contract.html         服务条款
  privacy.html          隐私声明
  CSR.html              企业社会责任

  news-开头.html         新闻相关
  article-开头.html      资讯相关
  picture-开头.html      图片相关
  photo-开头.html        相册相关
  product-开头.html      产品相关
  goods-开头.html        商品相关
  system-开头.html       系统相关
  tag-开头.html          tag相关
  brand-开头.html        品牌相关
  help-开头.html         帮助相关
  member-开头.html       会员相关
  search-开头.html       搜索相关
---------------------------------- */
/*1 重定义浏览器默认样式
	Name:			style_reset
	Explain:		重定义浏览器默认样式
*/
* {
    word-wrap: break-word
}

html, body, h1, h2, h3, h4, h5, h6, hr, p, iframe, dl, dt, dd, ul, ol, li, pre, form, button, input, textarea, th, td, fieldset {
    margin: 0;
    padding: 0
}

ul, ol, dl {
    list-style-type: none
}

html, body {
    *position: static
}

html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
}

address, caption, cite, code, dfn, em, th, var {
    font-style: normal;
    font-weight: 400
}

input, button, textarea, select, optgroup, option {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit
}

input, button {
    overflow: visible;
    vertical-align: middle;
    outline: none
}

input[type="submit"], input[type="reset"], input[type="button"], input[type="text"], input[type="password"] {
    -webkit-appearance: none;
    outline: none
}

body, th, td, button, input, select, textarea {
    font-family: "Microsoft Yahei", "Hiragino Sans GB", "Helvetica Neue", Helvetica, tahoma, arial, "WenQuanYi Micro Hei", Verdana, sans-serif, "\5B8B\4F53";
    font-size: 12px;
    color: #333;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

@media ( max-width: 767px) {
    html {
        overflow-y: auto
    }

    body, th, td, button, input, select, textarea {
        font-size: 14px
    }
}

body {
    line-height: 1.6;
    position: relative
}

h1, h2, h3, h4, h5, h6 {
    font-size: 100%
}

a, area {
    outline: none;
    blr: expression(this.onFocus=this.blur())
}

a {
    text-decoration: none;
    cursor: pointer
}

a:hover {
    text-decoration: underline;
    outline: none
}

a.ie6:hover {
    zoom: 1
}

a:focus {
    outline: none
}

a:hover, a:active {
    outline: none
}

:focus {
    outline: none
}

sub, sup {
    vertical-align: baseline
}

button, input[type="button"], input[type="submit"] {
    line-height: normal !important
}

/*img*/
img {
    border: 0;
    vertical-align: middle
}

a img, img {
    -ms-interpolation-mode: bicubic
}

/*IE下a:hover 背景闪烁*/
* html {
    overflow: -moz-scrollbars-vertical;
    zoom: expression(function(ele){ele.style.zoom = "1";document.execCommand("BackgroundImageCache",false,true)}(this))
}

/*HTML5 reset*/
header, footer, section, aside, details, menu, article, section, nav, address, hgroup, figure, figcaption, legend {
    display: block;
    margin: 0;
    padding: 0
}

time {
    display: inline
}

audio, canvas, video {
    display: inline-block;
    *display: inline;
    *zoom: 1
}

audio:not([controls]) {
    display: none
}

legend {
    width: 100%;
    margin-bottom: 20px;
    font-size: 21px;
    line-height: 40px;
    border: 0;
    border-bottom: 1px solid #e5e5e5
}

legend small {
    font-size: 15px;
    color: #999
}

svg:not(:root) {
    overflow: hidden
}

fieldset {
    border-width: 0;
    padding: 0.35em 0.625em 0.75em;
    margin: 0 2px;
    border: 1px solid #c0c0c0
}

input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {
    height: auto
}

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
}

input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none
}

/*清除浮动
	Name:			style_clearfix
	Example:		class="clearfix|cl"
	Explain:		clearfix（简写cl）避免因子元素浮动而导致的父元素高度缺失能问题
*/
.cl:after, .clearfix:after {
    content: "\20";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.cl, .clearfix {
    zoom: 1
}

/*2.1 栅格系统
	Name:			style_container
	Example:
	<div class="responsive">
	<div class="row clearfix" role="grid">
	  <div class="col-1">……</div>
	  ……
	</div>
	</div>
	Explain:		栅格系统
*/
/*2.1 响应式栅格系统*/
.container {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto
}

@media ( min-width: 992px) {
    .container {
        width: 960px
    }
}

@media ( min-width: 1200px) {
    .container {
        width: 1170px
    }
}

@media ( min-width: 1300px) {
    .container {
        width: 1270px
    }
}

@media print {
    .container {
        width: auto
    }
}

.row {
    box-sizing: border-box;
    margin-left: -15px;
    margin-right: -15px
}

.row:before,
.row:after {
    content: " ";
    display: table;
}

.row:after {
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
}

.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1,
.col-xs-2, .col-sm-2, .col-md-2, .col-lg-2,
.col-xs-3, .col-sm-3, .col-md-3, .col-lg-3,
.col-xs-4, .col-sm-4, .col-md-4, .col-lg-4,
.col-xs-5, .col-sm-5, .col-md-5, .col-lg-5,
.col-xs-6, .col-sm-6, .col-md-6, .col-lg-6,
.col-xs-7, .col-sm-7, .col-md-7, .col-lg-7,
.col-xs-8, .col-sm-8, .col-md-8, .col-lg-8,
.col-xs-9, .col-sm-9, .col-md-9, .col-lg-9,
.col-xs-10, .col-sm-10, .col-md-10, .col-lg-10,
.col-xs-11, .col-sm-11, .col-md-11, .col-lg-11,
.col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    min-height: 1px;
    position: relative;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in
}

.col-1 {
    width: 8.33333%
}

.col-2 {
    width: 16.66667%
}

.col-3 {
    width: 25%
}

.col-4 {
    width: 33.33333%
}

.col-5 {
    width: 41.66667%
}

.col-6 {
    width: 50%
}

.col-7 {
    width: 58.33333%
}

.col-8 {
    width: 66.66667%
}

.col-9 {
    width: 75%
}

.col-10 {
    width: 83.33333%
}

.col-11 {
    width: 91.66667%
}

.col-12 {
    width: 100%
}

.col-offset-0 {
    margin-left: 0
}

.col-offset-1 {
    margin-left: 8.33333%
}

.col-offset-2 {
    margin-left: 16.66667%
}

.col-offset-3 {
    margin-left: 25%
}

.col-offset-4 {
    margin-left: 33.33333%
}

.col-offset-5 {
    margin-left: 41.66667%
}

.col-offset-6 {
    margin-left: 50%
}

.col-offset-7 {
    margin-left: 58.33333%
}

.col-offset-8 {
    margin-left: 66.66667%
}

.col-offset-9 {
    margin-left: 75%
}

.col-offset-10 {
    margin-left: 83.33333%
}

.col-offset-11 {
    margin-left: 91.66667%
}

.col-push-0 {
    position: relative;
    left: 0;
    right: auto
}

.col-pull-0 {
    right: 0;
    left: auto
}

.col-push-1 {
    left: 8.33333%;
    right: auto
}

.col-pull-1 {
    right: 8.33333%;
    left: auto
}

.col-push-2 {
    left: 16.66667%;
    right: auto
}

.col-pull-2 {
    right: 16.66667%;
    left: auto
}

.col-push-3 {
    left: 25%;
    right: auto
}

.col-pull-3 {
    right: 25%;
    left: auto
}

.col-push-4 {
    left: 33.33333%;
    right: auto
}

.col-pull-4 {
    right: 33.33333%;
    left: auto
}

.col-push-5 {
    left: 41.66667%;
    right: auto
}

.col-pull-5 {
    right: 41.66667%;
    left: auto
}

.col-push-6 {
    left: 50%;
    right: auto
}

.col-pull-6 {
    right: 50%;
    left: auto
}

.col-push-7 {
    left: 58.33333%;
    right: auto
}

.col-pull-7 {
    right: 58.33333%;
    left: auto
}

.col-push-8 {
    left: 66.66667%;
    right: auto
}

.col-pull-8 {
    right: 66.66667%;
    left: auto
}

.col-push-9 {
    left: 75%;
    right: auto
}

.col-pull-9 {
    right: 75%;
    left: auto
}

.col-push-10 {
    left: 83.33333%;
    right: auto
}

.col-pull-10 {
    right: 83.33333%;
    left: auto
}

.col-push-11 {
    left: 91.66667%;
    right: auto
}

.col-pull-11 {
    right: 91.66667%;
    left: auto
}

/*局部模块平分*/
.col-1-1 {
    width: 100%
}

.col-2-1 {
    width: 50%
}

.col-3-1 {
    width: 33.333333%
}

.col-3-2 {
    width: 66.666667%
}

.col-4-1 {
    width: 25%
}

.col-4-3 {
    width: 75%
}

.col-5-1 {
    width: 20%
}

.col-5-2 {
    width: 40%
}

.col-5-3 {
    width: 60%
}

.col-5-4 {
    width: 80%
}

.col-6-1 {
    width: 16.666667%
}

.col-6-5 {
    width: 83.333333%
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    float: left
}

.col-xs-12 {
    width: 100%
}

.col-xs-11 {
    width: 91.66666667%
}

.col-xs-10 {
    width: 83.33333333%
}

.col-xs-9 {
    width: 75%
}

.col-xs-8 {
    width: 66.66666667%
}

.col-xs-7 {
    width: 58.33333333%
}

.col-xs-6 {
    width: 50%
}

.col-xs-5 {
    width: 41.66666667%
}

.col-xs-4 {
    width: 33.33333333%
}

.col-xs-3 {
    width: 25%
}

.col-xs-2 {
    width: 16.66666667%
}

.col-xs-1 {
    width: 8.33333333%
}

.col-24-xs-pull-12 {
    right: 100%
}

.col-24-xs-pull-11 {
    right: 91.66666667%
}

.col-24-xs-pull-10 {
    right: 83.33333333%
}

.col-24-xs-pull-9 {
    right: 75%
}

.col-24-xs-pull-8 {
    right: 66.66666667%
}

.col-24-xs-pull-7 {
    right: 58.33333333%
}

.col-24-xs-pull-6 {
    right: 50%
}

.col-24-xs-pull-5 {
    right: 41.66666667%
}

.col-24-xs-pull-4 {
    right: 33.33333333%
}

.col-24-xs-pull-3 {
    right: 25%
}

.col-24-xs-pull-2 {
    right: 16.66666667%
}

.col-24-xs-pull-1 {
    right: 8.33333333%
}

.col-24-xs-pull-0 {
    right: auto
}

.col-xs-push-12 {
    left: 100%
}

.col-xs-push-11 {
    left: 91.66666667%
}

.col-xs-push-10 {
    left: 83.33333333%
}

.col-xs-push-9 {
    left: 75%
}

.col-xs-push-8 {
    left: 66.66666667%
}

.col-xs-push-7 {
    left: 58.33333333%
}

.col-xs-push-6 {
    left: 50%
}

.col-xs-push-5 {
    left: 41.66666667%
}

.col-xs-push-4 {
    left: 33.33333333%
}

.col-xs-push-3 {
    left: 25%
}

.col-xs-push-2 {
    left: 16.66666667%
}

.col-xs-push-1 {
    left: 8.33333333%
}

.col-xs-push-0 {
    left: auto
}

.col-xs-offset-12 {
    margin-left: 100%
}

.col-xs-offset-11 {
    margin-left: 91.66666667%
}

.col-xs-offset-10 {
    margin-left: 83.33333333%
}

.col-xs-offset-9 {
    margin-left: 75%
}

.col-xs-offset-8 {
    margin-left: 66.66666667%
}

.col-xs-offset-7 {
    margin-left: 58.33333333%
}

.col-xs-offset-6 {
    margin-left: 50%
}

.col-xs-offset-5 {
    margin-left: 41.66666667%
}

.col-xs-offset-4 {
    margin-left: 33.33333333%
}

.col-xs-offset-3 {
    margin-left: 25%
}

.col-xs-offset-2 {
    margin-left: 16.66666667%
}

.col-xs-offset-1 {
    margin-left: 8.33333333%
}

.col-xs-offset-0 {
    margin-left: 0
}

@media (max-width: 767px) {
    .responsive [class^="col-"],
    .responsive [class*=" col-"] {
        float: none !important;
        width: auto !important
    }

    .responsive [class^="col-offset-"],
    .responsive [class*=" col-offset-"] {
        margin-left: 0 !important
    }
}

@media (min-width: 768px) {
    .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9 {
        float: left
    }

    .col-sm-12 {
        width: 100%
    }

    .col-sm-11 {
        width: 91.66666666666666%
    }

    .col-sm-10 {
        width: 83.33333333333334%
    }

    .col-sm-9 {
        width: 75%
    }

    .col-sm-8 {
        width: 66.66666666666666%
    }

    .col-sm-7 {
        width: 58.333333333333336%
    }

    .col-sm-6 {
        width: 50%
    }

    .col-sm-5 {
        width: 41.66666666666667%
    }

    .col-sm-4 {
        width: 33.33333333333333%
    }

    .col-sm-3 {
        width: 25%
    }

    .col-sm-2 {
        width: 16.666666666666664%
    }

    .col-sm-1 {
        width: 8.333333333333332%
    }

    .col-sm-pull-12 {
        right: 100%
    }

    .col-sm-pull-11 {
        right: 91.66666666666666%
    }

    .col-sm-pull-10 {
        right: 83.33333333333334%
    }

    .col-sm-pull-9 {
        right: 75%
    }

    .col-sm-pull-8 {
        right: 66.66666666666666%
    }

    .col-sm-pull-7 {
        right: 58.333333333333336%
    }

    .col-sm-pull-6 {
        right: 50%
    }

    .col-sm-pull-5 {
        right: 41.66666666666667%
    }

    .col-sm-pull-4 {
        right: 33.33333333333333%
    }

    .col-sm-pull-3 {
        right: 25%
    }

    .col-sm-pull-2 {
        right: 16.666666666666664%
    }

    .col-sm-pull-1 {
        right: 8.333333333333332%
    }

    .col-sm-pull-0 {
        right: 0
    }

    .col-sm-push-12 {
        left: 100%
    }

    .col-sm-push-11 {
        left: 91.66666666666666%
    }

    .col-sm-push-10 {
        left: 83.33333333333334%
    }

    .col-sm-push-9 {
        left: 75%
    }

    .col-sm-push-8 {
        left: 66.66666666666666%
    }

    .col-sm-push-7 {
        left: 58.333333333333336%
    }

    .col-sm-push-6 {
        left: 50%
    }

    .col-sm-push-5 {
        left: 41.66666666666667%
    }

    .col-sm-push-4 {
        left: 33.33333333333333%
    }

    .col-sm-push-3 {
        left: 25%
    }

    .col-sm-push-2 {
        left: 16.666666666666664%
    }

    .col-sm-push-1 {
        left: 8.333333333333332%
    }

    .col-sm-push-0 {
        left: 0
    }

    .col-sm-offset-12 {
        margin-left: 100%
    }

    .col-sm-offset-11 {
        margin-left: 91.66666666666666%
    }

    .col-sm-offset-10 {
        margin-left: 83.33333333333334%
    }

    .col-sm-offset-9 {
        margin-left: 75%
    }

    .col-sm-offset-8 {
        margin-left: 66.66666666666666%
    }

    .col-sm-offset-7 {
        margin-left: 58.333333333333336%
    }

    .col-sm-offset-6 {
        margin-left: 50%
    }

    .col-sm-offset-5 {
        margin-left: 41.66666666666667%
    }

    .col-sm-offset-4 {
        margin-left: 33.33333333333333%
    }

    .col-sm-offset-3 {
        margin-left: 25%
    }

    .col-sm-offset-2 {
        margin-left: 16.666666666666664%
    }

    .col-sm-offset-1 {
        margin-left: 8.333333333333332%
    }

    .col-sm-offset-0 {
        margin-left: 0
    }
}

@media (min-width: 992px) {
    .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9 {
        float: left
    }

    .col-md-12 {
        width: 100%
    }

    .col-md-11 {
        width: 91.66666666666666%
    }

    .col-md-10 {
        width: 83.33333333333334%
    }

    .col-md-9 {
        width: 75%
    }

    .col-md-8 {
        width: 66.66666666666666%
    }

    .col-md-7 {
        width: 58.333333333333336%
    }

    .col-md-6 {
        width: 50%
    }

    .col-md-5 {
        width: 41.66666666666667%
    }

    .col-md-4 {
        width: 33.33333333333333%
    }

    .col-md-3 {
        width: 25%
    }

    .col-md-2 {
        width: 16.666666666666664%
    }

    .col-md-1 {
        width: 8.333333333333332%
    }

    .col-md-pull-12 {
        right: 100%
    }

    .col-md-pull-11 {
        right: 91.66666666666666%
    }

    .col-md-pull-10 {
        right: 83.33333333333334%
    }

    .col-md-pull-9 {
        right: 75%
    }

    .col-md-pull-8 {
        right: 66.66666666666666%
    }

    .col-md-pull-7 {
        right: 58.333333333333336%
    }

    .col-md-pull-6 {
        right: 50%
    }

    .col-md-pull-5 {
        right: 41.66666666666667%
    }

    .col-md-pull-4 {
        right: 33.33333333333333%
    }

    .col-md-pull-3 {
        right: 25%
    }

    .col-md-pull-2 {
        right: 16.666666666666664%
    }

    .col-md-pull-1 {
        right: 8.333333333333332%
    }

    .col-md-pull-0 {
        right: 0
    }

    .col-md-push-12 {
        left: 100%
    }

    .col-md-push-11 {
        left: 91.66666666666666%
    }

    .col-md-push-10 {
        left: 83.33333333333334%
    }

    .col-md-push-9 {
        left: 75%
    }

    .col-md-push-8 {
        left: 66.66666666666666%
    }

    .col-md-push-7 {
        left: 58.333333333333336%
    }

    .col-md-push-6 {
        left: 50%
    }

    .col-md-push-5 {
        left: 41.66666666666667%
    }

    .col-md-push-4 {
        left: 33.33333333333333%
    }

    .col-md-push-3 {
        left: 25%
    }

    .col-md-push-2 {
        left: 16.666666666666664%
    }

    .col-md-push-1 {
        left: 8.333333333333332%
    }

    .col-md-push-0 {
        left: 0
    }

    .col-md-offset-12 {
        margin-left: 100%
    }

    .col-md-offset-11 {
        margin-left: 91.66666666666666%
    }

    .col-md-offset-10 {
        margin-left: 83.33333333333334%
    }

    .col-md-offset-9 {
        margin-left: 75%
    }

    .col-md-offset-8 {
        margin-left: 66.66666666666666%
    }

    .col-md-offset-7 {
        margin-left: 58.333333333333336%
    }

    .col-md-offset-6 {
        margin-left: 50%
    }

    .col-md-offset-5 {
        margin-left: 41.66666666666667%
    }

    .col-md-offset-4 {
        margin-left: 33.33333333333333%
    }

    .col-md-offset-3 {
        margin-left: 25%
    }

    .col-md-offset-2 {
        margin-left: 16.666666666666664%
    }

    .col-md-offset-1 {
        margin-left: 8.333333333333332%
    }

    .col-md-offset-0 {
        margin-left: 0
    }
}

@media (min-width: 1200px) {
    .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9 {
        float: left
    }

    .col-lg-12 {
        width: 100%
    }

    .col-lg-11 {
        width: 91.66666666666666%
    }

    .col-lg-10 {
        width: 83.33333333333334%
    }

    .col-lg-9 {
        width: 75%
    }

    .col-lg-8 {
        width: 66.66666666666666%
    }

    .col-lg-7 {
        width: 58.333333333333336%
    }

    .col-lg-6 {
        width: 50%
    }

    .col-lg-5 {
        width: 41.66666666666667%
    }

    .col-lg-4 {
        width: 33.33333333333333%
    }

    .col-lg-3 {
        width: 25%
    }

    .col-lg-2 {
        width: 16.666666666666664%
    }

    .col-lg-1 {
        width: 8.333333333333332%
    }

    .col-lg-pull-12 {
        right: 100%
    }

    .col-lg-pull-11 {
        right: 91.66666666666666%
    }

    .col-lg-pull-10 {
        right: 83.33333333333334%
    }

    .col-lg-pull-9 {
        right: 75%
    }

    .col-lg-pull-8 {
        right: 66.66666666666666%
    }

    .col-lg-pull-7 {
        right: 58.333333333333336%
    }

    .col-lg-pull-6 {
        right: 50%
    }

    .col-lg-pull-5 {
        right: 41.66666666666667%
    }

    .col-lg-pull-4 {
        right: 33.33333333333333%
    }

    .col-lg-pull-3 {
        right: 25%
    }

    .col-lg-pull-2 {
        right: 16.666666666666664%
    }

    .col-lg-pull-1 {
        right: 8.333333333333332%
    }

    .col-lg-pull-0 {
        right: 0
    }

    .col-lg-push-12 {
        left: 100%
    }

    .col-lg-push-11 {
        left: 91.66666666666666%
    }

    .col-lg-push-10 {
        left: 83.33333333333334%
    }

    .col-lg-push-9 {
        left: 75%
    }

    .col-lg-push-8 {
        left: 66.66666666666666%
    }

    .col-lg-push-7 {
        left: 58.333333333333336%
    }

    .col-lg-push-6 {
        left: 50%
    }

    .col-lg-push-5 {
        left: 41.66666666666667%
    }

    .col-lg-push-4 {
        left: 33.33333333333333%
    }

    .col-lg-push-3 {
        left: 25%
    }

    .col-lg-push-2 {
        left: 16.666666666666664%
    }

    .col-lg-push-1 {
        left: 8.333333333333332%
    }

    .col-lg-push-0 {
        left: 0
    }

    .col-lg-offset-12 {
        margin-left: 100%
    }

    .col-lg-offset-11 {
        margin-left: 91.66666666666666%
    }

    .col-lg-offset-10 {
        margin-left: 83.33333333333334%
    }

    .col-lg-offset-9 {
        margin-left: 75%
    }

    .col-lg-offset-8 {
        margin-left: 66.66666666666666%
    }

    .col-lg-offset-7 {
        margin-left: 58.333333333333336%
    }

    .col-lg-offset-6 {
        margin-left: 50%
    }

    .col-lg-offset-5 {
        margin-left: 41.66666666666667%
    }

    .col-lg-offset-4 {
        margin-left: 33.33333333333333%
    }

    .col-lg-offset-3 {
        margin-left: 25%
    }

    .col-lg-offset-2 {
        margin-left: 16.666666666666664%
    }

    .col-lg-offset-1 {
        margin-left: 8.333333333333332%
    }

    .col-lg-offset-0 {
        margin-left: 0
    }
}

/* 24 栅格 */
.row-24 {
    position: relative;
    margin-left: 0;
    margin-right: 0;
    height: auto;
    zoom: 1;
    display: block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.row-24:before,
.row-24:after {
    content: " ";
    display: table;
}

.row-24:after {
    clear: both;
    visibility: hidden;
    font-size: 0;
    height: 0;
}

.col-24-1, .col-24-xs-1, .col-24-sm-1, .col-24-md-1, .col-24-lg-1, .col-24-xl-1, .col-24-xxl-1,
.col-24-2, .col-24-xs-2, .col-24-sm-2, .col-24-md-2, .col-24-lg-2, .col-24-xl-2, .col-24-xxl-2,
.col-24-3, .col-24-xs-3, .col-24-sm-3, .col-24-md-3, .col-24-lg-3, .col-24-xl-3, .col-24-xxl-3,
.col-24-4, .col-24-xs-4, .col-24-sm-4, .col-24-md-4, .col-24-lg-4, .col-24-xl-4, .col-24-xxl-4,
.col-24-5, .col-24-xs-5, .col-24-sm-5, .col-24-md-5, .col-24-lg-5, .col-24-xl-5, .col-24-xxl-5,
.col-24-6, .col-24-xs-6, .col-24-sm-6, .col-24-md-6, .col-24-lg-6, .col-24-xl-6, .col-24-xxl-6,
.col-24-7, .col-24-xs-7, .col-24-sm-7, .col-24-md-7, .col-24-lg-7, .col-24-xl-7, .col-24-xxl-7,
.col-24-8, .col-24-xs-8, .col-24-sm-8, .col-24-md-8, .col-24-lg-8, .col-24-xl-8, .col-24-xxl-8,
.col-24-9, .col-24-xs-9, .col-24-sm-9, .col-24-md-9, .col-24-lg-9, .col-24-xl-9, .col-24-xxl-9,
.col-24-10, .col-24-xs-10, .col-24-sm-10, .col-24-md-10, .col-24-lg-10, .col-24-xl-10, .col-24-xxl-10,
.col-24-11, .col-24-xs-11, .col-24-sm-11, .col-24-md-11, .col-24-lg-11, .col-24-xl-11, .col-24-xxl-11,
.col-24-12, .col-24-xs-12, .col-24-sm-12, .col-24-md-12, .col-24-lg-12, .col-24-xl-12, .col-24-xxl-12,
.col-24-13, .col-24-xs-13, .col-24-sm-13, .col-24-md-13, .col-24-lg-13, .col-24-xl-13, .col-24-xxl-13,
.col-24-14, .col-24-xs-14, .col-24-sm-14, .col-24-md-14, .col-24-lg-14, .col-24-xl-14, .col-24-xxl-14,
.col-24-15, .col-24-xs-15, .col-24-sm-15, .col-24-md-15, .col-24-lg-15, .col-24-xl-15, .col-24-xxl-15,
.col-24-16, .col-24-xs-16, .col-24-sm-16, .col-24-md-16, .col-24-lg-16, .col-24-xl-16, .col-24-xxl-16,
.col-24-17, .col-24-xs-17, .col-24-sm-17, .col-24-md-17, .col-24-lg-17, .col-24-xl-17, .col-24-xxl-17,
.col-24-18, .col-24-xs-18, .col-24-sm-18, .col-24-md-18, .col-24-lg-18, .col-24-xl-18, .col-24-xxl-18,
.col-24-19, .col-24-xs-19, .col-24-sm-19, .col-24-md-19, .col-24-lg-19, .col-24-xl-19, .col-24-xxl-19,
.col-24-20, .col-24-xs-20, .col-24-sm-20, .col-24-md-20, .col-24-lg-20, .col-24-xl-20, .col-24-xxl-20,
.col-24-21, .col-24-xs-21, .col-24-sm-21, .col-24-md-21, .col-24-lg-21, .col-24-xl-21, .col-24-xxl-21,
.col-24-22, .col-24-xs-22, .col-24-sm-22, .col-24-md-22, .col-24-lg-22, .col-24-xl-22, .col-24-xxl-22,
.col-24-23, .col-24-xs-23, .col-24-sm-23, .col-24-md-23, .col-24-lg-23, .col-24-xl-23, .col-24-xxl-23,
.col-24-24, .col-24-xs-24, .col-24-sm-24, .col-24-md-24, .col-24-lg-24, .col-24-xl-24, .col-24-xxl-24 {
    position: relative;
    min-height: 1px;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

.col-24-xs-1, .col-24-xs-2, .col-24-xs-3, .col-24-xs-4, .col-24-xs-5, .col-24-xs-6,
.col-24-xs-7, .col-24-xs-8, .col-24-xs-9, .col-24-xs-10, .col-24-xs-11, .col-24-xs-12,
.col-24-xs-13, .col-24-xs-14, .col-24-xs-15, .col-24-xs-16, .col-24-xs-17, .col-24-xs-18,
.col-24-xs-19, .col-24-xs-20, .col-24-xs-21, .col-24-xs-22, .col-24-xs-23, .col-24-xs-24 {
    float: left;
}

.col-24-xs-24 {
    width: 100%
}

.col-24-xs-23 {
    width: 95.83333333%
}

.col-24-xs-22 {
    width: 91.66666667%
}

.col-24-xs-21 {
    width: 87.5%
}

.col-24-xs-20 {
    width: 83.33333333%
}

.col-24-xs-19 {
    width: 79.16666667%
}

.col-24-xs-18 {
    width: 75%
}

.col-24-xs-17 {
    width: 70.83333333%
}

.col-24-xs-16 {
    width: 66.66666667%
}

.col-24-xs-15 {
    width: 62.5%
}

.col-24-xs-14 {
    width: 58.33333333%
}

.col-24-xs-13 {
    width: 54.16666667%
}

.col-24-xs-12 {
    width: 50%
}

.col-24-xs-11 {
    width: 45.83333333%
}

.col-24-xs-10 {
    width: 41.66666667%
}

.col-24-xs-9 {
    width: 37.5%
}

.col-24-xs-8 {
    width: 33.33333333%
}

.col-24-xs-7 {
    width: 29.16666667%
}

.col-24-xs-6 {
    width: 25%
}

.col-24-xs-5 {
    width: 20.83333333%
}

.col-24-xs-4 {
    width: 16.66666667%
}

.col-24-xs-3 {
    width: 12.5%
}

.col-24-xs-2 {
    width: 8.33333333%
}

.col-24-xs-1 {
    width: 4.16666667%
}

.col-24-xs-pull-24 {
    right: 100%
}

.col-24-xs-pull-23 {
    right: 95.83333333%
}

.col-24-xs-pull-22 {
    right: 91.66666667%
}

.col-24-xs-pull-21 {
    right: 87.5%
}

.col-24-xs-pull-20 {
    right: 83.33333333%
}

.col-24-xs-pull-19 {
    right: 79.16666667%
}

.col-24-xs-pull-18 {
    right: 75%
}

.col-24-xs-pull-17 {
    right: 70.83333333%
}

.col-24-xs-pull-16 {
    right: 66.66666667%
}

.col-24-xs-pull-15 {
    right: 62.5%
}

.col-24-xs-pull-14 {
    right: 58.33333333%
}

.col-24-xs-pull-13 {
    right: 54.16666667%
}

.col-24-xs-pull-12 {
    right: 50%
}

.col-24-xs-pull-11 {
    right: 45.83333333%
}

.col-24-xs-pull-10 {
    right: 41.66666667%
}

.col-24-xs-pull-9 {
    right: 37.5%
}

.col-24-xs-pull-8 {
    right: 33.33333333%
}

.col-24-xs-pull-7 {
    right: 29.16666667%
}

.col-24-xs-pull-6 {
    right: 25%
}

.col-24-xs-pull-5 {
    right: 20.83333333%
}

.col-24-xs-pull-4 {
    right: 16.66666667%
}

.col-24-xs-pull-3 {
    right: 12.5%
}

.col-24-xs-pull-2 {
    right: 8.33333333%
}

.col-24-xs-pull-1 {
    right: 4.16666667%
}

.col-24-xs-pull-0 {
    right: auto
}

.col-24-xs-push-24 {
    left: 100%
}

.col-24-xs-push-23 {
    left: 95.83333333%
}

.col-24-xs-push-22 {
    left: 91.66666667%
}

.col-24-xs-push-21 {
    left: 87.5%
}

.col-24-xs-push-20 {
    left: 83.33333333%
}

.col-24-xs-push-19 {
    left: 79.16666667%
}

.col-24-xs-push-18 {
    left: 75%
}

.col-24-xs-push-17 {
    left: 70.83333333%
}

.col-24-xs-push-16 {
    left: 66.66666667%
}

.col-24-xs-push-15 {
    left: 62.5%
}

.col-24-xs-push-14 {
    left: 58.33333333%
}

.col-24-xs-push-13 {
    left: 54.16666667%
}

.col-24-xs-push-12 {
    left: 50%
}

.col-24-xs-push-11 {
    left: 45.83333333%
}

.col-24-xs-push-10 {
    left: 41.66666667%
}

.col-24-xs-push-9 {
    left: 37.5%
}

.col-24-xs-push-8 {
    left: 33.33333333%
}

.col-24-xs-push-7 {
    left: 29.16666667%
}

.col-24-xs-push-6 {
    left: 25%
}

.col-24-xs-push-5 {
    left: 20.83333333%
}

.col-24-xs-push-4 {
    left: 16.66666667%
}

.col-24-xs-push-3 {
    left: 12.5%
}

.col-24-xs-push-2 {
    left: 8.33333333%
}

.col-24-xs-push-1 {
    left: 4.16666667%
}

.col-24-xs-push-0 {
    left: auto
}

.col-24-xs-offset-24 {
    margin-left: 100%
}

.col-24-xs-offset-23 {
    margin-left: 95.83333333%
}

.col-24-xs-offset-22 {
    margin-left: 91.66666667%
}

.col-24-xs-offset-21 {
    margin-left: 87.5%
}

.col-24-xs-offset-20 {
    margin-left: 83.33333333%
}

.col-24-xs-offset-19 {
    margin-left: 79.16666667%
}

.col-24-xs-offset-18 {
    margin-left: 75%
}

.col-24-xs-offset-17 {
    margin-left: 70.83333333%
}

.col-24-xs-offset-16 {
    margin-left: 66.66666667%
}

.col-24-xs-offset-15 {
    margin-left: 62.5%
}

.col-24-xs-offset-14 {
    margin-left: 58.33333333%
}

.col-24-xs-offset-13 {
    margin-left: 54.16666667%
}

.col-24-xs-offset-12 {
    margin-left: 50%
}

.col-24-xs-offset-11 {
    margin-left: 45.83333333%
}

.col-24-xs-offset-10 {
    margin-left: 41.66666667%
}

.col-24-xs-offset-9 {
    margin-left: 37.5%
}

.col-24-xs-offset-8 {
    margin-left: 33.33333333%
}

.col-24-xs-offset-7 {
    margin-left: 29.16666667%
}

.col-24-xs-offset-6 {
    margin-left: 25%
}

.col-24-xs-offset-5 {
    margin-left: 20.83333333%
}

.col-24-xs-offset-4 {
    margin-left: 16.66666667%
}

.col-24-xs-offset-3 {
    margin-left: 12.5%
}

.col-24-xs-offset-2 {
    margin-left: 8.33333333%
}

.col-24-xs-offset-1 {
    margin-left: 4.16666667%
}

.col-24-xs-offset-0 {
    margin-left: 0
}

@media (min-width: 676px) {
    .col-24-sm-1, .col-24-sm-2, .col-24-sm-3, .col-24-sm-4, .col-24-sm-5, .col-24-sm-6,
    .col-24-sm-7, .col-24-sm-8, .col-24-sm-9, .col-24-sm-10, .col-24-sm-11, .col-24-sm-12,
    .col-24-sm-13, .col-24-sm-14, .col-24-sm-15, .col-24-sm-16, .col-24-sm-17, .col-24-sm-18,
    .col-24-sm-19, .col-24-sm-20, .col-24-sm-21, .col-24-sm-22, .col-24-sm-23, .col-24-sm-24 {
        float: left;
    }

    .col-24-sm-24 {
        width: 100%
    }

    .col-24-sm-23 {
        width: 95.83333333%
    }

    .col-24-sm-22 {
        width: 91.66666667%
    }

    .col-24-sm-21 {
        width: 87.5%
    }

    .col-24-sm-20 {
        width: 83.33333333%
    }

    .col-24-sm-19 {
        width: 79.16666667%
    }

    .col-24-sm-18 {
        width: 75%
    }

    .col-24-sm-17 {
        width: 70.83333333%
    }

    .col-24-sm-16 {
        width: 66.66666667%
    }

    .col-24-sm-15 {
        width: 62.5%
    }

    .col-24-sm-14 {
        width: 58.33333333%
    }

    .col-24-sm-13 {
        width: 54.16666667%
    }

    .col-24-sm-12 {
        width: 50%
    }

    .col-24-sm-11 {
        width: 45.83333333%
    }

    .col-24-sm-10 {
        width: 41.66666667%
    }

    .col-24-sm-9 {
        width: 37.5%
    }

    .col-24-sm-8 {
        width: 33.33333333%
    }

    .col-24-sm-7 {
        width: 29.16666667%
    }

    .col-24-sm-6 {
        width: 25%
    }

    .col-24-sm-5 {
        width: 20.83333333%
    }

    .col-24-sm-4 {
        width: 16.66666667%
    }

    .col-24-sm-3 {
        width: 12.5%
    }

    .col-24-sm-2 {
        width: 8.33333333%
    }

    .col-24-sm-1 {
        width: 4.16666667%
    }

    .col-24-sm-pull-24 {
        right: 100%
    }

    .col-24-sm-pull-23 {
        right: 95.83333333%
    }

    .col-24-sm-pull-22 {
        right: 91.66666667%
    }

    .col-24-sm-pull-21 {
        right: 87.5%
    }

    .col-24-sm-pull-20 {
        right: 83.33333333%
    }

    .col-24-sm-pull-19 {
        right: 79.16666667%
    }

    .col-24-sm-pull-18 {
        right: 75%
    }

    .col-24-sm-pull-17 {
        right: 70.83333333%
    }

    .col-24-sm-pull-16 {
        right: 66.66666667%
    }

    .col-24-sm-pull-15 {
        right: 62.5%
    }

    .col-24-sm-pull-14 {
        right: 58.33333333%
    }

    .col-24-sm-pull-13 {
        right: 54.16666667%
    }

    .col-24-sm-pull-12 {
        right: 50%
    }

    .col-24-sm-pull-11 {
        right: 45.83333333%
    }

    .col-24-sm-pull-10 {
        right: 41.66666667%
    }

    .col-24-sm-pull-9 {
        right: 37.5%
    }

    .col-24-sm-pull-8 {
        right: 33.33333333%
    }

    .col-24-sm-pull-7 {
        right: 29.16666667%
    }

    .col-24-sm-pull-6 {
        right: 25%
    }

    .col-24-sm-pull-5 {
        right: 20.83333333%
    }

    .col-24-sm-pull-4 {
        right: 16.66666667%
    }

    .col-24-sm-pull-3 {
        right: 12.5%
    }

    .col-24-sm-pull-2 {
        right: 8.33333333%
    }

    .col-24-sm-pull-1 {
        right: 4.16666667%
    }

    .col-24-sm-pull-0 {
        right: auto
    }

    .col-24-sm-push-24 {
        left: 100%
    }

    .col-24-sm-push-23 {
        left: 95.83333333%
    }

    .col-24-sm-push-22 {
        left: 91.66666667%
    }

    .col-24-sm-push-21 {
        left: 87.5%
    }

    .col-24-sm-push-20 {
        left: 83.33333333%
    }

    .col-24-sm-push-19 {
        left: 79.16666667%
    }

    .col-24-sm-push-18 {
        left: 75%
    }

    .col-24-sm-push-17 {
        left: 70.83333333%
    }

    .col-24-sm-push-16 {
        left: 66.66666667%
    }

    .col-24-sm-push-15 {
        left: 62.5%
    }

    .col-24-sm-push-14 {
        left: 58.33333333%
    }

    .col-24-sm-push-13 {
        left: 54.16666667%
    }

    .col-24-sm-push-12 {
        left: 50%
    }

    .col-24-sm-push-11 {
        left: 45.83333333%
    }

    .col-24-sm-push-10 {
        left: 41.66666667%
    }

    .col-24-sm-push-9 {
        left: 37.5%
    }

    .col-24-sm-push-8 {
        left: 33.33333333%
    }

    .col-24-sm-push-7 {
        left: 29.16666667%
    }

    .col-24-sm-push-6 {
        left: 25%
    }

    .col-24-sm-push-5 {
        left: 20.83333333%
    }

    .col-24-sm-push-4 {
        left: 16.66666667%
    }

    .col-24-sm-push-3 {
        left: 12.5%
    }

    .col-24-sm-push-2 {
        left: 8.33333333%
    }

    .col-24-sm-push-1 {
        left: 4.16666667%
    }

    .col-24-sm-push-0 {
        left: auto
    }

    .col-24-sm-offset-24 {
        margin-left: 100%
    }

    .col-24-sm-offset-23 {
        margin-left: 95.83333333%
    }

    .col-24-sm-offset-22 {
        margin-left: 91.66666667%
    }

    .col-24-sm-offset-21 {
        margin-left: 87.5%
    }

    .col-24-sm-offset-20 {
        margin-left: 83.33333333%
    }

    .col-24-sm-offset-19 {
        margin-left: 79.16666667%
    }

    .col-24-sm-offset-18 {
        margin-left: 75%
    }

    .col-24-sm-offset-17 {
        margin-left: 70.83333333%
    }

    .col-24-sm-offset-16 {
        margin-left: 66.66666667%
    }

    .col-24-sm-offset-15 {
        margin-left: 62.5%
    }

    .col-24-sm-offset-14 {
        margin-left: 58.33333333%
    }

    .col-24-sm-offset-13 {
        margin-left: 54.16666667%
    }

    .col-24-sm-offset-12 {
        margin-left: 50%
    }

    .col-24-sm-offset-11 {
        margin-left: 45.83333333%
    }

    .col-24-sm-offset-10 {
        margin-left: 41.66666667%
    }

    .col-24-sm-offset-9 {
        margin-left: 37.5%
    }

    .col-24-sm-offset-8 {
        margin-left: 33.33333333%
    }

    .col-24-sm-offset-7 {
        margin-left: 29.16666667%
    }

    .col-24-sm-offset-6 {
        margin-left: 25%
    }

    .col-24-sm-offset-5 {
        margin-left: 20.83333333%
    }

    .col-24-sm-offset-4 {
        margin-left: 16.66666667%
    }

    .col-24-sm-offset-3 {
        margin-left: 12.5%
    }

    .col-24-sm-offset-2 {
        margin-left: 8.33333333%
    }

    .col-24-sm-offset-1 {
        margin-left: 4.16666667%
    }

    .col-24-sm-offset-0 {
        margin-left: 0
    }
}

@media (min-width: 768px) {
    .col-24-md-1, .col-24-md-2, .col-24-md-3, .col-24-md-4, .col-24-md-5, .col-24-md-6,
    .col-24-md-7, .col-24-md-8, .col-24-md-9, .col-24-md-10, .col-24-md-11, .col-24-md-12,
    .col-24-md-13, .col-24-md-14, .col-24-md-15, .col-24-md-16, .col-24-md-17, .col-24-md-18,
    .col-24-md-19, .col-24-md-20, .col-24-md-21, .col-24-md-22, .col-24-md-23, .col-24-md-24 {
        float: left;
    }

    .col-24-md-24 {
        width: 100%
    }

    .col-24-md-23 {
        width: 95.83333333%
    }

    .col-24-md-22 {
        width: 91.66666667%
    }

    .col-24-md-21 {
        width: 87.5%
    }

    .col-24-md-20 {
        width: 83.33333333%
    }

    .col-24-md-19 {
        width: 79.16666667%
    }

    .col-24-md-18 {
        width: 75%
    }

    .col-24-md-17 {
        width: 70.83333333%
    }

    .col-24-md-16 {
        width: 66.66666667%
    }

    .col-24-md-15 {
        width: 62.5%
    }

    .col-24-md-14 {
        width: 58.33333333%
    }

    .col-24-md-13 {
        width: 54.16666667%
    }

    .col-24-md-12 {
        width: 50%
    }

    .col-24-md-11 {
        width: 45.83333333%
    }

    .col-24-md-10 {
        width: 41.66666667%
    }

    .col-24-md-9 {
        width: 37.5%
    }

    .col-24-md-8 {
        width: 33.33333333%
    }

    .col-24-md-7 {
        width: 29.16666667%
    }

    .col-24-md-6 {
        width: 25%
    }

    .col-24-md-5 {
        width: 20.83333333%
    }

    .col-24-md-4 {
        width: 16.66666667%
    }

    .col-24-md-3 {
        width: 12.5%
    }

    .col-24-md-2 {
        width: 8.33333333%
    }

    .col-24-md-1 {
        width: 4.16666667%
    }

    .col-24-md-pull-24 {
        right: 100%
    }

    .col-24-md-pull-23 {
        right: 95.83333333%
    }

    .col-24-md-pull-22 {
        right: 91.66666667%
    }

    .col-24-md-pull-21 {
        right: 87.5%
    }

    .col-24-md-pull-20 {
        right: 83.33333333%
    }

    .col-24-md-pull-19 {
        right: 79.16666667%
    }

    .col-24-md-pull-18 {
        right: 75%
    }

    .col-24-md-pull-17 {
        right: 70.83333333%
    }

    .col-24-md-pull-16 {
        right: 66.66666667%
    }

    .col-24-md-pull-15 {
        right: 62.5%
    }

    .col-24-md-pull-14 {
        right: 58.33333333%
    }

    .col-24-md-pull-13 {
        right: 54.16666667%
    }

    .col-24-md-pull-12 {
        right: 50%
    }

    .col-24-md-pull-11 {
        right: 45.83333333%
    }

    .col-24-md-pull-10 {
        right: 41.66666667%
    }

    .col-24-md-pull-9 {
        right: 37.5%
    }

    .col-24-md-pull-8 {
        right: 33.33333333%
    }

    .col-24-md-pull-7 {
        right: 29.16666667%
    }

    .col-24-md-pull-6 {
        right: 25%
    }

    .col-24-md-pull-5 {
        right: 20.83333333%
    }

    .col-24-md-pull-4 {
        right: 16.66666667%
    }

    .col-24-md-pull-3 {
        right: 12.5%
    }

    .col-24-md-pull-2 {
        right: 8.33333333%
    }

    .col-24-md-pull-1 {
        right: 4.16666667%
    }

    .col-24-md-pull-0 {
        right: auto
    }

    .col-24-md-push-24 {
        left: 100%
    }

    .col-24-md-push-23 {
        left: 95.83333333%
    }

    .col-24-md-push-22 {
        left: 91.66666667%
    }

    .col-24-md-push-21 {
        left: 87.5%
    }

    .col-24-md-push-20 {
        left: 83.33333333%
    }

    .col-24-md-push-19 {
        left: 79.16666667%
    }

    .col-24-md-push-18 {
        left: 75%
    }

    .col-24-md-push-17 {
        left: 70.83333333%
    }

    .col-24-md-push-16 {
        left: 66.66666667%
    }

    .col-24-md-push-15 {
        left: 62.5%
    }

    .col-24-md-push-14 {
        left: 58.33333333%
    }

    .col-24-md-push-13 {
        left: 54.16666667%
    }

    .col-24-md-push-12 {
        left: 50%
    }

    .col-24-md-push-11 {
        left: 45.83333333%
    }

    .col-24-md-push-10 {
        left: 41.66666667%
    }

    .col-24-md-push-9 {
        left: 37.5%
    }

    .col-24-md-push-8 {
        left: 33.33333333%
    }

    .col-24-md-push-7 {
        left: 29.16666667%
    }

    .col-24-md-push-6 {
        left: 25%
    }

    .col-24-md-push-5 {
        left: 20.83333333%
    }

    .col-24-md-push-4 {
        left: 16.66666667%
    }

    .col-24-md-push-3 {
        left: 12.5%
    }

    .col-24-md-push-2 {
        left: 8.33333333%
    }

    .col-24-md-push-1 {
        left: 4.16666667%
    }

    .col-24-md-push-0 {
        left: auto
    }

    .col-24-md-offset-24 {
        margin-left: 100%
    }

    .col-24-md-offset-23 {
        margin-left: 95.83333333%
    }

    .col-24-md-offset-22 {
        margin-left: 91.66666667%
    }

    .col-24-md-offset-21 {
        margin-left: 87.5%
    }

    .col-24-md-offset-20 {
        margin-left: 83.33333333%
    }

    .col-24-md-offset-19 {
        margin-left: 79.16666667%
    }

    .col-24-md-offset-18 {
        margin-left: 75%
    }

    .col-24-md-offset-17 {
        margin-left: 70.83333333%
    }

    .col-24-md-offset-16 {
        margin-left: 66.66666667%
    }

    .col-24-md-offset-15 {
        margin-left: 62.5%
    }

    .col-24-md-offset-14 {
        margin-left: 58.33333333%
    }

    .col-24-md-offset-13 {
        margin-left: 54.16666667%
    }

    .col-24-md-offset-12 {
        margin-left: 50%
    }

    .col-24-md-offset-11 {
        margin-left: 45.83333333%
    }

    .col-24-md-offset-10 {
        margin-left: 41.66666667%
    }

    .col-24-md-offset-9 {
        margin-left: 37.5%
    }

    .col-24-md-offset-8 {
        margin-left: 33.33333333%
    }

    .col-24-md-offset-7 {
        margin-left: 29.16666667%
    }

    .col-24-md-offset-6 {
        margin-left: 25%
    }

    .col-24-md-offset-5 {
        margin-left: 20.83333333%
    }

    .col-24-md-offset-4 {
        margin-left: 16.66666667%
    }

    .col-24-md-offset-3 {
        margin-left: 12.5%
    }

    .col-24-md-offset-2 {
        margin-left: 8.33333333%
    }

    .col-24-md-offset-1 {
        margin-left: 4.16666667%
    }

    .col-24-md-offset-0 {
        margin-left: 0
    }
}

@media (min-width: 992px) {
    .col-24-lg-1, .col-24-lg-2, .col-24-lg-3, .col-24-lg-4, .col-24-lg-5, .col-24-lg-6,
    .col-24-lg-7, .col-24-lg-8, .col-24-lg-9, .col-24-lg-10, .col-24-lg-11, .col-24-lg-12,
    .col-24-lg-13, .col-24-lg-14, .col-24-lg-15, .col-24-lg-16, .col-24-lg-17, .col-24-lg-18,
    .col-24-lg-19, .col-24-lg-20, .col-24-lg-21, .col-24-lg-22, .col-24-lg-23, .col-24-lg-24 {
        float: left;
    }

    .col-24-lg-24 {
        width: 100%
    }

    .col-24-lg-23 {
        width: 95.83333333%
    }

    .col-24-lg-22 {
        width: 91.66666667%
    }

    .col-24-lg-21 {
        width: 87.5%
    }

    .col-24-lg-20 {
        width: 83.33333333%
    }

    .col-24-lg-19 {
        width: 79.16666667%
    }

    .col-24-lg-18 {
        width: 75%
    }

    .col-24-lg-17 {
        width: 70.83333333%
    }

    .col-24-lg-16 {
        width: 66.66666667%
    }

    .col-24-lg-15 {
        width: 62.5%
    }

    .col-24-lg-14 {
        width: 58.33333333%
    }

    .col-24-lg-13 {
        width: 54.16666667%
    }

    .col-24-lg-12 {
        width: 50%
    }

    .col-24-lg-11 {
        width: 45.83333333%
    }

    .col-24-lg-10 {
        width: 41.66666667%
    }

    .col-24-lg-9 {
        width: 37.5%
    }

    .col-24-lg-8 {
        width: 33.33333333%
    }

    .col-24-lg-7 {
        width: 29.16666667%
    }

    .col-24-lg-6 {
        width: 25%
    }

    .col-24-lg-5 {
        width: 20.83333333%
    }

    .col-24-lg-4 {
        width: 16.66666667%
    }

    .col-24-lg-3 {
        width: 12.5%
    }

    .col-24-lg-2 {
        width: 8.33333333%
    }

    .col-24-lg-1 {
        width: 4.16666667%
    }

    .col-24-lg-pull-24 {
        right: 100%
    }

    .col-24-lg-pull-23 {
        right: 95.83333333%
    }

    .col-24-lg-pull-22 {
        right: 91.66666667%
    }

    .col-24-lg-pull-21 {
        right: 87.5%
    }

    .col-24-lg-pull-20 {
        right: 83.33333333%
    }

    .col-24-lg-pull-19 {
        right: 79.16666667%
    }

    .col-24-lg-pull-18 {
        right: 75%
    }

    .col-24-lg-pull-17 {
        right: 70.83333333%
    }

    .col-24-lg-pull-16 {
        right: 66.66666667%
    }

    .col-24-lg-pull-15 {
        right: 62.5%
    }

    .col-24-lg-pull-14 {
        right: 58.33333333%
    }

    .col-24-lg-pull-13 {
        right: 54.16666667%
    }

    .col-24-lg-pull-12 {
        right: 50%
    }

    .col-24-lg-pull-11 {
        right: 45.83333333%
    }

    .col-24-lg-pull-10 {
        right: 41.66666667%
    }

    .col-24-lg-pull-9 {
        right: 37.5%
    }

    .col-24-lg-pull-8 {
        right: 33.33333333%
    }

    .col-24-lg-pull-7 {
        right: 29.16666667%
    }

    .col-24-lg-pull-6 {
        right: 25%
    }

    .col-24-lg-pull-5 {
        right: 20.83333333%
    }

    .col-24-lg-pull-4 {
        right: 16.66666667%
    }

    .col-24-lg-pull-3 {
        right: 12.5%
    }

    .col-24-lg-pull-2 {
        right: 8.33333333%
    }

    .col-24-lg-pull-1 {
        right: 4.16666667%
    }

    .col-24-lg-pull-0 {
        right: auto
    }

    .col-24-lg-push-24 {
        left: 100%
    }

    .col-24-lg-push-23 {
        left: 95.83333333%
    }

    .col-24-lg-push-22 {
        left: 91.66666667%
    }

    .col-24-lg-push-21 {
        left: 87.5%
    }

    .col-24-lg-push-20 {
        left: 83.33333333%
    }

    .col-24-lg-push-19 {
        left: 79.16666667%
    }

    .col-24-lg-push-18 {
        left: 75%
    }

    .col-24-lg-push-17 {
        left: 70.83333333%
    }

    .col-24-lg-push-16 {
        left: 66.66666667%
    }

    .col-24-lg-push-15 {
        left: 62.5%
    }

    .col-24-lg-push-14 {
        left: 58.33333333%
    }

    .col-24-lg-push-13 {
        left: 54.16666667%
    }

    .col-24-lg-push-12 {
        left: 50%
    }

    .col-24-lg-push-11 {
        left: 45.83333333%
    }

    .col-24-lg-push-10 {
        left: 41.66666667%
    }

    .col-24-lg-push-9 {
        left: 37.5%
    }

    .col-24-lg-push-8 {
        left: 33.33333333%
    }

    .col-24-lg-push-7 {
        left: 29.16666667%
    }

    .col-24-lg-push-6 {
        left: 25%
    }

    .col-24-lg-push-5 {
        left: 20.83333333%
    }

    .col-24-lg-push-4 {
        left: 16.66666667%
    }

    .col-24-lg-push-3 {
        left: 12.5%
    }

    .col-24-lg-push-2 {
        left: 8.33333333%
    }

    .col-24-lg-push-1 {
        left: 4.16666667%
    }

    .col-24-lg-push-0 {
        left: auto
    }

    .col-24-lg-offset-24 {
        margin-left: 100%
    }

    .col-24-lg-offset-23 {
        margin-left: 95.83333333%
    }

    .col-24-lg-offset-22 {
        margin-left: 91.66666667%
    }

    .col-24-lg-offset-21 {
        margin-left: 87.5%
    }

    .col-24-lg-offset-20 {
        margin-left: 83.33333333%
    }

    .col-24-lg-offset-19 {
        margin-left: 79.16666667%
    }

    .col-24-lg-offset-18 {
        margin-left: 75%
    }

    .col-24-lg-offset-17 {
        margin-left: 70.83333333%
    }

    .col-24-lg-offset-16 {
        margin-left: 66.66666667%
    }

    .col-24-lg-offset-15 {
        margin-left: 62.5%
    }

    .col-24-lg-offset-14 {
        margin-left: 58.33333333%
    }

    .col-24-lg-offset-13 {
        margin-left: 54.16666667%
    }

    .col-24-lg-offset-12 {
        margin-left: 50%
    }

    .col-24-lg-offset-11 {
        margin-left: 45.83333333%
    }

    .col-24-lg-offset-10 {
        margin-left: 41.66666667%
    }

    .col-24-lg-offset-9 {
        margin-left: 37.5%
    }

    .col-24-lg-offset-8 {
        margin-left: 33.33333333%
    }

    .col-24-lg-offset-7 {
        margin-left: 29.16666667%
    }

    .col-24-lg-offset-6 {
        margin-left: 25%
    }

    .col-24-lg-offset-5 {
        margin-left: 20.83333333%
    }

    .col-24-lg-offset-4 {
        margin-left: 16.66666667%
    }

    .col-24-lg-offset-3 {
        margin-left: 12.5%
    }

    .col-24-lg-offset-2 {
        margin-left: 8.33333333%
    }

    .col-24-lg-offset-1 {
        margin-left: 4.16666667%
    }

    .col-24-lg-offset-0 {
        margin-left: 0
    }
}

@media (min-width: 1200px) {
    .col-24-xl-1, .col-24-xl-2, .col-24-xl-3, .col-24-xl-4, .col-24-xl-5, .col-24-xl-6,
    .col-24-xl-7, .col-24-xl-8, .col-24-xl-9, .col-24-xl-10, .col-24-xl-11, .col-24-xl-12,
    .col-24-xl-13, .col-24-xl-14, .col-24-xl-15, .col-24-xl-16, .col-24-xl-17, .col-24-xl-18,
    .col-24-xl-19, .col-24-xl-20, .col-24-xl-21, .col-24-xl-22, .col-24-xl-23, .col-24-xl-24 {
        float: left;
    }

    .col-24-xl-24 {
        width: 100%
    }

    .col-24-xl-23 {
        width: 95.83333333%
    }

    .col-24-xl-22 {
        width: 91.66666667%
    }

    .col-24-xl-21 {
        width: 87.5%
    }

    .col-24-xl-20 {
        width: 83.33333333%
    }

    .col-24-xl-19 {
        width: 79.16666667%
    }

    .col-24-xl-18 {
        width: 75%
    }

    .col-24-xl-17 {
        width: 70.83333333%
    }

    .col-24-xl-16 {
        width: 66.66666667%
    }

    .col-24-xl-15 {
        width: 62.5%
    }

    .col-24-xl-14 {
        width: 58.33333333%
    }

    .col-24-xl-13 {
        width: 54.16666667%
    }

    .col-24-xl-12 {
        width: 50%
    }

    .col-24-xl-11 {
        width: 45.83333333%
    }

    .col-24-xl-10 {
        width: 41.66666667%
    }

    .col-24-xl-9 {
        width: 37.5%
    }

    .col-24-xl-8 {
        width: 33.33333333%
    }

    .col-24-xl-7 {
        width: 29.16666667%
    }

    .col-24-xl-6 {
        width: 25%
    }

    .col-24-xl-5 {
        width: 20.83333333%
    }

    .col-24-xl-4 {
        width: 16.66666667%
    }

    .col-24-xl-3 {
        width: 12.5%
    }

    .col-24-xl-2 {
        width: 8.33333333%
    }

    .col-24-xl-1 {
        width: 4.16666667%
    }

    .col-24-xl-pull-24 {
        right: 100%
    }

    .col-24-xl-pull-23 {
        right: 95.83333333%
    }

    .col-24-xl-pull-22 {
        right: 91.66666667%
    }

    .col-24-xl-pull-21 {
        right: 87.5%
    }

    .col-24-xl-pull-20 {
        right: 83.33333333%
    }

    .col-24-xl-pull-19 {
        right: 79.16666667%
    }

    .col-24-xl-pull-18 {
        right: 75%
    }

    .col-24-xl-pull-17 {
        right: 70.83333333%
    }

    .col-24-xl-pull-16 {
        right: 66.66666667%
    }

    .col-24-xl-pull-15 {
        right: 62.5%
    }

    .col-24-xl-pull-14 {
        right: 58.33333333%
    }

    .col-24-xl-pull-13 {
        right: 54.16666667%
    }

    .col-24-xl-pull-12 {
        right: 50%
    }

    .col-24-xl-pull-11 {
        right: 45.83333333%
    }

    .col-24-xl-pull-10 {
        right: 41.66666667%
    }

    .col-24-xl-pull-9 {
        right: 37.5%
    }

    .col-24-xl-pull-8 {
        right: 33.33333333%
    }

    .col-24-xl-pull-7 {
        right: 29.16666667%
    }

    .col-24-xl-pull-6 {
        right: 25%
    }

    .col-24-xl-pull-5 {
        right: 20.83333333%
    }

    .col-24-xl-pull-4 {
        right: 16.66666667%
    }

    .col-24-xl-pull-3 {
        right: 12.5%
    }

    .col-24-xl-pull-2 {
        right: 8.33333333%
    }

    .col-24-xl-pull-1 {
        right: 4.16666667%
    }

    .col-24-xl-pull-0 {
        right: auto
    }

    .col-24-xl-push-24 {
        left: 100%
    }

    .col-24-xl-push-23 {
        left: 95.83333333%
    }

    .col-24-xl-push-22 {
        left: 91.66666667%
    }

    .col-24-xl-push-21 {
        left: 87.5%
    }

    .col-24-xl-push-20 {
        left: 83.33333333%
    }

    .col-24-xl-push-19 {
        left: 79.16666667%
    }

    .col-24-xl-push-18 {
        left: 75%
    }

    .col-24-xl-push-17 {
        left: 70.83333333%
    }

    .col-24-xl-push-16 {
        left: 66.66666667%
    }

    .col-24-xl-push-15 {
        left: 62.5%
    }

    .col-24-xl-push-14 {
        left: 58.33333333%
    }

    .col-24-xl-push-13 {
        left: 54.16666667%
    }

    .col-24-xl-push-12 {
        left: 50%
    }

    .col-24-xl-push-11 {
        left: 45.83333333%
    }

    .col-24-xl-push-10 {
        left: 41.66666667%
    }

    .col-24-xl-push-9 {
        left: 37.5%
    }

    .col-24-xl-push-8 {
        left: 33.33333333%
    }

    .col-24-xl-push-7 {
        left: 29.16666667%
    }

    .col-24-xl-push-6 {
        left: 25%
    }

    .col-24-xl-push-5 {
        left: 20.83333333%
    }

    .col-24-xl-push-4 {
        left: 16.66666667%
    }

    .col-24-xl-push-3 {
        left: 12.5%
    }

    .col-24-xl-push-2 {
        left: 8.33333333%
    }

    .col-24-xl-push-1 {
        left: 4.16666667%
    }

    .col-24-xl-push-0 {
        left: auto
    }

    .col-24-xl-offset-24 {
        margin-left: 100%
    }

    .col-24-xl-offset-23 {
        margin-left: 95.83333333%
    }

    .col-24-xl-offset-22 {
        margin-left: 91.66666667%
    }

    .col-24-xl-offset-21 {
        margin-left: 87.5%
    }

    .col-24-xl-offset-20 {
        margin-left: 83.33333333%
    }

    .col-24-xl-offset-19 {
        margin-left: 79.16666667%
    }

    .col-24-xl-offset-18 {
        margin-left: 75%
    }

    .col-24-xl-offset-17 {
        margin-left: 70.83333333%
    }

    .col-24-xl-offset-16 {
        margin-left: 66.66666667%
    }

    .col-24-xl-offset-15 {
        margin-left: 62.5%
    }

    .col-24-xl-offset-14 {
        margin-left: 58.33333333%
    }

    .col-24-xl-offset-13 {
        margin-left: 54.16666667%
    }

    .col-24-xl-offset-12 {
        margin-left: 50%
    }

    .col-24-xl-offset-11 {
        margin-left: 45.83333333%
    }

    .col-24-xl-offset-10 {
        margin-left: 41.66666667%
    }

    .col-24-xl-offset-9 {
        margin-left: 37.5%
    }

    .col-24-xl-offset-8 {
        margin-left: 33.33333333%
    }

    .col-24-xl-offset-7 {
        margin-left: 29.16666667%
    }

    .col-24-xl-offset-6 {
        margin-left: 25%
    }

    .col-24-xl-offset-5 {
        margin-left: 20.83333333%
    }

    .col-24-xl-offset-4 {
        margin-left: 16.66666667%
    }

    .col-24-xl-offset-3 {
        margin-left: 12.5%
    }

    .col-24-xl-offset-2 {
        margin-left: 8.33333333%
    }

    .col-24-xl-offset-1 {
        margin-left: 4.16666667%
    }

    .col-24-xl-offset-0 {
        margin-left: 0
    }
}

@media (min-width: 1600px) {
    .col-24-xxl-1, .col-24-xxl-2, .col-24-xxl-3, .col-24-xxl-4, .col-24-xxl-5, .col-24-xxl-6,
    .col-24-xxl-7, .col-24-xxl-8, .col-24-xxl-9, .col-24-xxl-10, .col-24-xxl-11, .col-24-xxl-12,
    .col-24-xxl-13, .col-24-xxl-14, .col-24-xxl-15, .col-24-xxl-16, .col-24-xxl-17, .col-24-xxl-18,
    .col-24-xxl-19, .col-24-xxl-20, .col-24-xxl-21, .col-24-xxl-22, .col-24-xxl-23, .col-24-xxl-24 {
        float: left;
    }

    .col-24-xxl-24 {
        width: 100%
    }

    .col-24-xxl-23 {
        width: 95.83333333%
    }

    .col-24-xxl-22 {
        width: 91.66666667%
    }

    .col-24-xxl-21 {
        width: 87.5%
    }

    .col-24-xxl-20 {
        width: 83.33333333%
    }

    .col-24-xxl-19 {
        width: 79.16666667%
    }

    .col-24-xxl-18 {
        width: 75%
    }

    .col-24-xxl-17 {
        width: 70.83333333%
    }

    .col-24-xxl-16 {
        width: 66.66666667%
    }

    .col-24-xxl-15 {
        width: 62.5%
    }

    .col-24-xxl-14 {
        width: 58.33333333%
    }

    .col-24-xxl-13 {
        width: 54.16666667%
    }

    .col-24-xxl-12 {
        width: 50%
    }

    .col-24-xxl-11 {
        width: 45.83333333%
    }

    .col-24-xxl-10 {
        width: 41.66666667%
    }

    .col-24-xxl-9 {
        width: 37.5%
    }

    .col-24-xxl-8 {
        width: 33.33333333%
    }

    .col-24-xxl-7 {
        width: 29.16666667%
    }

    .col-24-xxl-6 {
        width: 25%
    }

    .col-24-xxl-5 {
        width: 20.83333333%
    }

    .col-24-xxl-4 {
        width: 16.66666667%
    }

    .col-24-xxl-3 {
        width: 12.5%
    }

    .col-24-xxl-2 {
        width: 8.33333333%
    }

    .col-24-xxl-1 {
        width: 4.16666667%
    }

    .col-24-xxl-pull-24 {
        right: 100%
    }

    .col-24-xxl-pull-23 {
        right: 95.83333333%
    }

    .col-24-xxl-pull-22 {
        right: 91.66666667%
    }

    .col-24-xxl-pull-21 {
        right: 87.5%
    }

    .col-24-xxl-pull-20 {
        right: 83.33333333%
    }

    .col-24-xxl-pull-19 {
        right: 79.16666667%
    }

    .col-24-xxl-pull-18 {
        right: 75%
    }

    .col-24-xxl-pull-17 {
        right: 70.83333333%
    }

    .col-24-xxl-pull-16 {
        right: 66.66666667%
    }

    .col-24-xxl-pull-15 {
        right: 62.5%
    }

    .col-24-xxl-pull-14 {
        right: 58.33333333%
    }

    .col-24-xxl-pull-13 {
        right: 54.16666667%
    }

    .col-24-xxl-pull-12 {
        right: 50%
    }

    .col-24-xxl-pull-11 {
        right: 45.83333333%
    }

    .col-24-xxl-pull-10 {
        right: 41.66666667%
    }

    .col-24-xxl-pull-9 {
        right: 37.5%
    }

    .col-24-xxl-pull-8 {
        right: 33.33333333%
    }

    .col-24-xxl-pull-7 {
        right: 29.16666667%
    }

    .col-24-xxl-pull-6 {
        right: 25%
    }

    .col-24-xxl-pull-5 {
        right: 20.83333333%
    }

    .col-24-xxl-pull-4 {
        right: 16.66666667%
    }

    .col-24-xxl-pull-3 {
        right: 12.5%
    }

    .col-24-xxl-pull-2 {
        right: 8.33333333%
    }

    .col-24-xxl-pull-1 {
        right: 4.16666667%
    }

    .col-24-xxl-pull-0 {
        right: auto
    }

    .col-24-xxl-push-24 {
        left: 100%
    }

    .col-24-xxl-push-23 {
        left: 95.83333333%
    }

    .col-24-xxl-push-22 {
        left: 91.66666667%
    }

    .col-24-xxl-push-21 {
        left: 87.5%
    }

    .col-24-xxl-push-20 {
        left: 83.33333333%
    }

    .col-24-xxl-push-19 {
        left: 79.16666667%
    }

    .col-24-xxl-push-18 {
        left: 75%
    }

    .col-24-xxl-push-17 {
        left: 70.83333333%
    }

    .col-24-xxl-push-16 {
        left: 66.66666667%
    }

    .col-24-xxl-push-15 {
        left: 62.5%
    }

    .col-24-xxl-push-14 {
        left: 58.33333333%
    }

    .col-24-xxl-push-13 {
        left: 54.16666667%
    }

    .col-24-xxl-push-12 {
        left: 50%
    }

    .col-24-xxl-push-11 {
        left: 45.83333333%
    }

    .col-24-xxl-push-10 {
        left: 41.66666667%
    }

    .col-24-xxl-push-9 {
        left: 37.5%
    }

    .col-24-xxl-push-8 {
        left: 33.33333333%
    }

    .col-24-xxl-push-7 {
        left: 29.16666667%
    }

    .col-24-xxl-push-6 {
        left: 25%
    }

    .col-24-xxl-push-5 {
        left: 20.83333333%
    }

    .col-24-xxl-push-4 {
        left: 16.66666667%
    }

    .col-24-xxl-push-3 {
        left: 12.5%
    }

    .col-24-xxl-push-2 {
        left: 8.33333333%
    }

    .col-24-xxl-push-1 {
        left: 4.16666667%
    }

    .col-24-xxl-push-0 {
        left: auto
    }

    .col-24-xxl-offset-24 {
        margin-left: 100%
    }

    .col-24-xxl-offset-23 {
        margin-left: 95.83333333%
    }

    .col-24-xxl-offset-22 {
        margin-left: 91.66666667%
    }

    .col-24-xxl-offset-21 {
        margin-left: 87.5%
    }

    .col-24-xxl-offset-20 {
        margin-left: 83.33333333%
    }

    .col-24-xxl-offset-19 {
        margin-left: 79.16666667%
    }

    .col-24-xxl-offset-18 {
        margin-left: 75%
    }

    .col-24-xxl-offset-17 {
        margin-left: 70.83333333%
    }

    .col-24-xxl-offset-16 {
        margin-left: 66.66666667%
    }

    .col-24-xxl-offset-15 {
        margin-left: 62.5%
    }

    .col-24-xxl-offset-14 {
        margin-left: 58.33333333%
    }

    .col-24-xxl-offset-13 {
        margin-left: 54.16666667%
    }

    .col-24-xxl-offset-12 {
        margin-left: 50%
    }

    .col-24-xxl-offset-11 {
        margin-left: 45.83333333%
    }

    .col-24-xxl-offset-10 {
        margin-left: 41.66666667%
    }

    .col-24-xxl-offset-9 {
        margin-left: 37.5%
    }

    .col-24-xxl-offset-8 {
        margin-left: 33.33333333%
    }

    .col-24-xxl-offset-7 {
        margin-left: 29.16666667%
    }

    .col-24-xxl-offset-6 {
        margin-left: 25%
    }

    .col-24-xxl-offset-5 {
        margin-left: 20.83333333%
    }

    .col-24-xxl-offset-4 {
        margin-left: 16.66666667%
    }

    .col-24-xxl-offset-3 {
        margin-left: 12.5%
    }

    .col-24-xxl-offset-2 {
        margin-left: 8.33333333%
    }

    .col-24-xxl-offset-1 {
        margin-left: 4.16666667%
    }

    .col-24-xxl-offset-0 {
        margin-left: 0
    }
}

/*2.2 响应式隐藏显示
	Name:			style_Layout
	Explain:		左右两栏|左中右三栏|上中下
	Last Modify:	guojunhui
*/
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg,
.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
    display: none !important
}

@media ( max-width: 767px) {
    .visible-xs {
        display: block !important
    }

    table.visible-xs {
        display: table
    }

    tr.visible-xs {
        display: table-row !important
    }

    th.visible-xs, td.visible-xs {
        display: table-cell !important
    }

    .hidden-xs {
        display: none !important
    }

    .visible-xs-block {
        display: block !important
    }

    .visible-xs-inline {
        display: inline !important
    }

    .visible-xs-inline-block {
        display: inline-block !important
    }
}

@media ( min-width: 768px) and (max-width: 991px) {
    .visible-sm {
        display: block !important
    }

    table.visible-sm {
        display: table
    }

    tr.visible-sm {
        display: table-row !important
    }

    th.visible-sm, td.visible-sm {
        display: table-cell !important
    }

    .hidden-sm {
        display: none !important
    }

    .visible-sm-block {
        display: block !important
    }

    .visible-sm-inline {
        display: inline !important
    }

    .visible-sm-inline-block {
        display: inline-block !important
    }
}

@media ( min-width: 992px) and (max-width: 1199px) {
    .visible-md {
        display: block !important
    }

    table.visible-md {
        display: table
    }

    tr.visible-md {
        display: table-row !important
    }

    th.visible-md, td.visible-md {
        display: table-cell !important
    }

    .hidden-md {
        display: none !important
    }

    .visible-md-block {
        display: block !important
    }

    .visible-md-inline {
        display: inline !important
    }

    .visible-md-inline-block {
        display: inline-block !important
    }
}

@media ( min-width: 1200px) {
    .visible-lg {
        display: block !important
    }

    table.visible-lg {
        display: table
    }

    tr.visible-lg {
        display: table-row !important
    }

    th.visible-lg, td.visible-lg {
        display: table-cell !important
    }

    .hidden-lg {
        display: none !important
    }

    .visible-lg-block {
        display: block !important
    }

    .visible-lg-inline {
        display: inline !important
    }

    .visible-lg-inline-block {
        display: inline-block !important
    }
}

.visible-print {
    display: none !important
}

.visible-print-block {
    display: none !important
}

.visible-print-inline {
    display: none !important
}

.visible-print-inline-block {
    display: none !important
}

@media print {
    .visible-print {
        display: block !important
    }

    table.visible-print {
        display: table
    }

    tr.visible-print {
        display: table-row !important
    }

    th.visible-print, td.visible-print {
        display: table-cell !important
    }

    .visible-print-block {
        display: block !important
    }

    .visible-print-inline {
        display: inline !important
    }

    .visible-print-inline-block {
        display: inline-block !important
    }

    .hidden-print {
        display: none !important
    }
}

/*最外层*/
.containBox {
    background-color: #fff;
    position: relative;
    z-index: 100;
    zoom: 1;
    -moz-transition: -moz-transform .2s ease-out;
    -webkit-transition: -webkit-transform .2s ease-out;
    -o-transition: -o-transform .2s ease-out;
    transition: transform .2s ease-out;
    top: 0px;
}

.sideBox {
    display: none
}

.containBox-bg {
    display: none
}

@media (max-width: 767px) {
    body, .content {
        font-size: 16px;
        line-height: 1.6
    }

    html, body {
        overflow: hidden;
        height: 100%
    }

    .containBox {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        overflow: hidden;
    }

    .containBox-bg {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        display: block;
        z-index: 2000
    }

    /*隐藏的菜单*/
    .sideBox {
        position: absolute;
        display: block;
        z-index: 99;
        right: 0;
        top: 0;
        bottom: 0;
        width: 250px;
        background-color: #303135
    }

    .sideBox .navbar-nav {
        display: block
    }

    .sideBox .navbar-nav li {
        border-bottom: 1px solid #222;
        display: block
    }

    .sideBox .navbar-nav a {
        color: #fff;
        display: block;
        padding-left: 20px;
        padding: 10px 30px;
    }

    .sideBox .navbar-nav a:hover {
        text-decoration: none;
    }

    .Hui-wraper {
        width: auto;
        padding: 0 10px
    }

    .AD-img img {
        width: 100%;
        height: auto
    }

    body.sideBox-open .containBox {
        -moz-transform: translate3d(-250px, 0, 0);
        -webkit-transform: translate3d(-250px, 0, 0);
        transform: translate3d(-250px, 0, 0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
    }

    .wap-container {
        height: 100%;
        width: 100%;
        min-width: 320px;
        overflow: auto;
    }

    body.sideBox-open .containBox-bg {
        bottom: 0;
        right: 0;
    }
}

/*2.3 常用布局
	Name:			style_Layout
	Explain:		左右两栏|左中右三栏|上中下
	Last Modify:	guojunhui
*/
.Hui-wraper, .wp {
    margin-left: auto;
    margin-right: auto;
    text-align: left
}

.sd {
    float: right
}

.ct2 .mn {
    float: left
}

.ct2 .sd {
    float: right
}

.ct2_r .leftmenu {
    float: left
}

.ct2_r .mn {
    float: right
}

.ct3 .app {
    float: left;
    margin-right: 20px
}

.ct3 .mn {
    float: left;
    border-left: solid 1px #ddd
}

.ct3 .sd {
    float: right
}

.w-1000 {
    width: 1000px
}

.w-980 {
    width: 980px
}

.w-300 {
    width: 300px
}

.w-200 {
    width: 200px
}

@media (max-width: 1000px) {
    .Hui-wraper, .wp, {
        width: auto !important;
        padding: 0 15px !important
    }
}

@media print {
    .Hui-wraper {
        width: auto
    }
}

/*3.0 基础样式*/
/*3.1 排版*/
/*3.1.1 标题
	Example：
	<h1>h1. 大标题<small>小标题</small></h1>
    <h2>h2. 大标题<small>小标题</small></h2>
    <h3>h3. 大标题<small>小标题</small></h3>
    <h4>h4. 大标题<small>小标题</small></h4>
    <h5>h5. 大标题<small>小标题</small></h5>
    <h6>h6. 大标题<small>小标题</small></h6>
*/
h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    line-height: 1.1;
    color: inherit
}

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small {
    font-weight: 400;
    line-height: 1;
    color: #999
}

h1, h2, h3 {
    padding-top: 20px;
    padding-bottom: 10px
}

h1 small, h2 small, h3 small, h1 .small, h2 .small, h3 .small {
    font-size: 65%
}

h4, h5, h6 {
    margin-top: 10px;
    margin-bottom: 10px
}

h4 small, h5 small, h6 small, h4 .small, h5 .small, h6 .small {
    font-size: 75%
}

h1 {
    font-size: 36px
}

h2 {
    font-size: 30px
}

h3 {
    font-size: 24px
}

h4 {
    font-size: 18px
}

h5 {
    font-size: 14px
}

h6 {
    font-size: 12px
}

/*3.1.2 强调
	Example:
	<p>这是段落，向下10像素间距</p>
	<smail>小型文本，是父容器字体大小的85%</smail>
	<strong>重要文本，加粗显示</strong>
	<em>被强调的文本，斜体显示</em>
	<u>带下划线的文本</u>
	<cite>引用</cite>
	<mark>突出显示文本</mark>
	<del>带删除线的文本</del>
	<pre class="prettyprint linenums">预格式化的文本</pre>
*/
p {
    margin-bottom: 10px
}

/*段落*/
small {
    font-size: 85%
}

/*小型文本*/
b, strong {
    font-weight: bold
}

/*重要的文本，加粗*/
em {
    font-style: italic
}

/*被强调的文本*/
i {
}

/*斜体*/
u {
}

/*加下划线*/
cite {
    font-style: normal
}

/*引用*/
mark {
    color: #000;
    background: #ff0
}

/*突出显示文本*/
var {
}

/*变量*/
kbd {
}

/*键盘文本*/
code {
}

/*计算机代码文本*/
dfn {
    font-style: italic
}

/*一个定义项目*/
del {
}

/*删除线*/
code, kbd, pre, samp {
    font-family: monospace, serif;
    font-size: 1em
}

pre {
    white-space: pre-wrap
}

/*预格式化的文本*/
.uppercase {
    text-transform: uppercase
}

/*文字大写*/
.lowercase {
    text-transform: lowercase
}

/*文字小写*/
.capitalize {
    text-transform: capitalize
}

/*首字母大写*/
.en {
    font-family: Arial !important
}

/*3.1.3 对齐
	Name:			style_text-align
	Example:		class="text-l|text-r|text-c|va-t|va-m|va-b"
	Explain:		.text-水平对齐 （.text-l左对齐|.text-r右对齐|.text-c居中对齐）
					.va-上下对齐 （.va-t 居上对齐|.va-m 居中对齐|.va-b 居下对齐）
*/
.text-l {
    text-align: left
}

.text-r {
    text-align: right
}

.text-c {
    text-align: center
}

.va * {
    vertical-align: sub !important;
    *vertical-align: middle !important;
    _vertical-align: middle !important
}

.va-t {
    vertical-align: top !important
}

.va-m {
    vertical-align: middle !important
}

.va-b {
    vertical-align: bottom !important
}

/*3.1.4 定位
	Name:			style_position
	Example:		class="pos-r|pos-a|pos-f"
	Explain:		.pos-r 相对定位|.pos-a 绝对定位|.pos-f 固定
*/
.pos-r {
    position: relative
}

.pos-a {
    position: absolute
}

.pos-f {
    position: fixed
}

/*3.1.5 浮动
	Name:			style_float
	Example:		class="l|r"
	Explain:		.l 左浮动|.r 右浮动
*/
.l, .f-l {
    float: left !important;
    _display: inline
}

.r, .f-r {
    float: right !important;
    _display: inline
}

[class*="span"].r,
[class*="span"].f-r {
    float: right
}

/*控制元素对定位的位置：居左|居右|j居上|居下*/
.pos-left {
    left: 0;
    right: auto
}

.pos-right {
    right: 0;
    left: auto
}

.pos-top {
    top: 0;
    bottom: auto
}

.pos-bottom {
    top: auto;
    bottom: 0
}

/*3.1.6 文字单行溢出省略号
	Name:			style_text-overflow
	Example:		class="text-overflow"
*/
.text-overflow {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

/*3.1.7 线条
	Name:			style_line
	Example:		class="line"
*/
.line {
    font-size: 0;
    line-height: 0;
    border-top: solid 1px #eee;
    float: none
}

/*3.1.8 外边距
	Name:			style_margin
	Example:		class="mt-5|mt-10..."
	Explain:		.mt表示上边距|.mb表示下边距|.ml表示左边距|.mr表示右边距
*/
.mt-5 {
    margin-top: 5px
}

.mt-10 {
    margin-top: 10px
}

.mt-15 {
    margin-top: 15px
}

.mt-20 {
    margin-top: 20px
}

.mt-25 {
    margin-top: 25px
}

.mt-30 {
    margin-top: 30px
}

.mt-35 {
    margin-top: 35px
}

.mt-40 {
    margin-top: 40px
}

.mt-50 {
    margin-top: 50px
}

.mb-5 {
    margin-bottom: 5px
}

.mb-10 {
    margin-bottom: 10px
}

.mb-15 {
    margin-bottom: 15px
}

.mb-20 {
    margin-bottom: 20px
}

.mb-30 {
    margin-bottom: 30px
}

.mb-40 {
    margin-bottom: 40px
}

.mb-50 {
    margin-bottom: 50px
}

.ml-5 {
    margin-left: 5px
}

.ml-10 {
    margin-left: 10px
}

.ml-15 {
    margin-left: 15px
}

.ml-20 {
    margin-left: 20px
}

.ml-30 {
    margin-left: 30px
}

.ml-40 {
    margin-left: 40px
}

.ml-50 {
    margin-left: 50px
}

.mr-5 {
    margin-right: 5px
}

.mr-10 {
    margin-right: 10px
}

.mr-15 {
    margin-right: 15px
}

.mr-20 {
    margin-right: 20px
}

.mr-30 {
    margin-right: 30px
}

.mr-40 {
    margin-right: 40px
}

.mr-50 {
    margin-right: 50px
}

/*3.1.9 内填充
	Name:			style_padding
	Example:		class="pt-5|pt-10|……"
	Explain:		.pt表示上填充|.pb表示下填充|.pl表示左填充|.pr表示右填充
*/
.pt-5 {
    padding-top: 5px
}

.pt-10 {
    padding-top: 10px
}

.pt-15 {
    padding-top: 15px
}

.pt-20 {
    padding-top: 20px
}

.pt-25 {
    padding-top: 25px
}

.pt-30 {
    padding-top: 30px
}

.pb-5 {
    padding-bottom: 5px
}

.pb-10 {
    padding-bottom: 10px
}

.pb-15 {
    padding-bottom: 15px
}

.pb-20 {
    padding-bottom: 20px
}

.pb-25 {
    padding-bottom: 25px
}

.pb-30 {
    padding-bottom: 30px
}

.pl-5 {
    padding-left: 5px
}

.pl-10 {
    padding-left: 10px
}

.pl-15 {
    padding-left: 15px
}

.pl-20 {
    padding-left: 20px
}

.pl-25 {
    padding-left: 25px
}

.pl-30 {
    padding-left: 30px
}

.pr-5 {
    padding-right: 5px
}

.pr-10 {
    padding-right: 10px
}

.pr-15 {
    padding-right: 15px
}

.pr-20 {
    padding-right: 20px
}

.pr-25 {
    padding-right: 25px
}

.pr-30 {
    padding-right: 30px
}

.pd-5 {
    padding: 5px
}

.pd-10 {
    padding: 10px
}

.pd-15 {
    padding: 15px
}

.pd-20 {
    padding: 20px
}

.pd-25 {
    padding: 25px
}

.pd-30 {
    padding: 30px
}

.pd-40 {
    padding: 40px
}

/*3.1.10 边框，css3圆角
	Name:			style-border
	Example:		class="bk_gray radius"
	Explain:		.bk_gray 边框|radius 圆角|round 椭圆 | circle 圆形
*/
.bk-gray {
    border: solid 1px #eee
}

.radius {
    border-radius: 4px
}

.size-MINI.radius {
    border-radius: 3px
}

.size-L.radius {
    border-radius: 5px
}

.size-XL.radius {
    border-radius: 6px
}

.round {
    border-radius: 50%;
    overflow: hidden
}

/*3.1.11 css3阴影
	Name:			style_shadow
	Example:		class="box_shadow|text-shadow"
	Explain:		box_shadow 块级元素阴影，全局样式，可用在表格，文本框，文本域，div等块级元素上。
					text-shadow 文字阴影
*/
.box-shadow {
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)
}

.text-shadow {
    -webkit-text-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.2)
}

/*3.1.12 行内分割竖线
	Name:			style_pipe
	Example:		<span class="pipe">|</span>
*/
.pipe {
    margin: 0 5px;
    color: #CCC;
    font-size: 10px !important
}

/*3.1.13 文字尺寸
	Name:			style_font-size
	Example:		class="f-12|f-14|f-16|f-18|f-20|f-24|f-26|f-28|f-30"
	Explain:		12px字体|14px字体|16px字体|18px字体|20px字体|24px字体|26px字体|28px字体|30px字体
*/
.f-12 {
    font-size: 12px
}

.f-14 {
    font-size: 14px
}

.f-16 {
    font-size: 16px
}

.f-18 {
    font-size: 18px
}

.f-20 {
    font-size: 20px
}

.f-22 {
    font-size: 22px
}

.f-24 {
    font-size: 24px
}

.f-26 {
    font-size: 26px
}

.f-28 {
    font-size: 28px
}

.f-30 {
    font-size: 30px
}

/*3.1.14 文字行距
	Name:			mod_line-height
	Example:		class="lh-16|lh-18|lh-20|lh-22|lh-24|lh-26|lh-28|lh-30"
	Explain:		16px行高|18px行高|20px行高|22px行高|24px行高|26px行高|30px行高
*/
.lh-16 {
    line-height: 16px
}

.lh-18 {
    line-height: 18px
}

.lh-20 {
    line-height: 20px
}

.lh-22 {
    line-height: 22px
}

.lh-24 {
    line-height: 24px
}

.lh-26 {
    line-height: 26px
}

.lh-28 {
    line-height: 28px
}

.lh-30 {
    line-height: 30px
}

/*2.0以前的兼容版本*/
.l16 {
    line-height: 16px
}

.l18 {
    line-height: 18px
}

.l20 {
    line-height: 20px
}

.l22 {
    line-height: 22px
}

.l-24 {
    line-height: 24px
}

.l-26 {
    line-height: 26px
}

.l-28 {
    line-height: 28px
}

.l-30 {
    line-height: 30px
}

/*3.1.15 文字颜色
	Name:			style_color
	Example:		class="c-primary|c-sub|c-success|c-danger|c-warning|c-333|c-666|c-999|c-red|c-green|c-blue|c-white|c-black|c-orange"
	Explain:		主要颜色|次主色|强调色—成功|强调色—危险|强调色—警告色|强调色—错误色|次主色—浅黑|辅助色—灰色|标准色—红色|标准色—绿色|标准色—蓝色|标准色—白色|标准色—黑色|标准色—橙色
*/
/*全局默认链接颜色*/
body {
    background-color: #fff;
    color: #333
}

.bg-fff {
    background-color: #fff
}

a {
    color: #333
}

a:hover, .active a {
    color: #06c
}

/*主要颜色*/
.c-primary, .c-primary a, a.c-primary {
    color: #5a98de
}

.c-primary a:hover, a.c-primary:hover {
    color: #5a98de
}

/*次主色*/
.c-secondary, .c-secondary a, a.c-secondary {
    color: #555
}

.c-secondary a:hover, a.c-secondary:hover {
    color: #555
}

/*强调色—成功*/
.c-success, .c-success a, a.c-success {
    color: #5eb95e
}

.c-success a:hover, a.c-success:hover {
    color: #5eb95e
}

/*强调色—危险*/
.c-danger, .c-danger a, a.c-danger {
    color: #dd514c
}

.c-danger a:hover, a.c-danger:hover {
    color: #dd514c
}

/*强调色—警告*/
.c-warning, .c-warning a, a.c-warning {
    color: #f37b1d
}

.c-warning a:hover, a.c-warning:hover {
    color: #f37b1d
}

/*强调色—错误*/
.c-error, .c-error a, a.c-error {
    color: #c00
}

.c-error a:hover, a.c-error:hover {
    color: #c00
}

/*辅助色—浅黑*/
.c-333, .c-333 a, a.c-333 {
    color: #333
}

.c-333 a:hover, a.c-333:hover {
    color: #333
}

/*辅助色—灰色*/
.c-666, .c-666 a, a.c-666 {
    color: #666
}

.c-666 a:hover, a.c-666:hover {
    color: #666
}

.c-999, .c-999 a, a.c-999 {
    color: #999
}

.c-999 a:hover, a.c-999:hover {
    color: #999
}

/*标准色—红色*/
.c-red, .c-red a, a.c-red {
    color: red
}

.c-red a:hover, a.c-red:hover {
    color: red
}

/*标准色—绿色*/
.c-green, .c-green a, a.c-green {
    color: green
}

.c-red a:hover, a.c-red:hover {
    color: green
}

/*标准色—蓝色*/
.c-blue, .c-blue a, a.c-blue {
    color: blue
}

.c-blue a:hover, a.c-blue:hover {
    color: blue
}

/*标准色—白色*/
.c-white, .c-white a, a.c-white {
    color: white
}

.c-white a:hover, a.c-white:hover {
    color: white
}

/*标准色—黑色*/
.c-black, .c-black a {
    color: black
}

.c-black a:hover, a.c-black:hover {
    color: black
}

/*标准色—橙色*/
.c-orange, .c-orange a, a.c-orange {
    color: orange
}

.c-orange a:hover, a.c-orange:hover {
    color: orange
}

/*3.1.16 文字颜色强调	从2.0起废弃3.1.16 文字强调，字体颜色全部放入到3.1.15
	Example:		class="text-muted|text-primary|text-warning|text-error|text-danger|text-success|text-info"
	Explain:		柔和|重要|警告|错误|危险|成功|信息
*/


/*3.1.17 缩略语
	Example:		<abbr title="User Interface" class="initialism">UI</abbr>
	Explain:
*/
abbr[title], abbr[data-original-title] {
    cursor: help;
    border-bottom: 1px dotted #999
}

abbr.initialism {
    font-size: 90%;
    text-transform: uppercase
}

/*3.1.18 地址
	Example:		<address>北京市海淀区上地……</address>
	Explain:
*/
address {
    display: block;
    margin-bottom: 20px;
    font-style: normal;
    line-height: 20px
}

/*3.1.19 引用
	Example:		<blockquote>这是引用的内容</blockquote>
	Explain:
*/
blockquote {
    padding: 0 0 0 15px;
    margin: 0 0 20px;
    border-left: 5px solid #eee
}

blockquote p {
    margin-bottom: 0;
    font-size: 17.5px;
    font-weight: 300;
    line-height: 1.25
}

blockquote small {
    display: block;
    line-height: 20px;
    color: #999
}

blockquote small:before {
    content: '\2014 \00A0'
}

blockquote.text-r {
    padding-right: 15px;
    padding-left: 0;
    border-right: 5px solid #eee;
    border-left: 0
}

blockquote.text-r p, blockquote.text-r small {
    text-align: right
}

blockquote.text-r small:before {
    content: ''
}

blockquote.text-r small:after {
    content: '\00A0 \2014'
}

q:before, q:after, blockquote:before, blockquote:after {
    content: ""
}

q { /*短的引用*/
    quotes: "\201C" "\201D" "\2018" "\2019"
}

/*3.1.20 上标，下标
	Example:		<sup>2</sup>	<sub>2<sub>
	Explain:		上标|下标
*/
sub, sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline
}

sup {
    top: -0.5em
}

sub {
    bottom: -0.25em
}

/*3.1.21 内容样式
	Name:			style_content
	Example:		<div class="content"><p>……</p></div>
	Explain:		内容样式
*/
.content {
    position: relative;
    font-size: 17px;
    line-height: 1.8;
    overflow: hidden;
    text-align: left;
    word-break: break-all;
    word-wrap: break-word
}

.content h3 {
    font-size: 18px
}

.content h4 {
    font-size: 16px
}

.content p {
    margin-bottom: 1.5rem;
    text-align: justify;
    word-break: break-all
}

.content p.text-c {
    text-align: center
}

.indent {
    text-indent: 2em
}

.content img {
    max-width: 100%
}

.content ul {
    text-indent: 2em
}

@media (max-width: 767px) {
    .content {
        font-size: 16px
    }
}

@media (max-width: 480px) {
    .content img {
        max-width: 100% !important;
        height: auto !important;
        width: expression(this.width > 320 ? "320px" : this.width) !important
    }

    * html .content img {
        width: expression(this.width>320&&this.width>this.height?320:auto)
    }
}

/*3.1.22 列表
	Name:			style_ulolli
	Example:
<ul class="list-view">
	<li class="item">无序列表</li>
	<li class="item">无序列表</li>
	<li class="item">无序列表</li>
</ul>
<ol class="list-view">
	<li class="item">无序列表</li>
	<li class="item">无序列表</li>
	<li class="item">无序列表</li>
</ol>
	Explain:
*/
ul.unstyled, ol.unstyled {
    margin-left: 0;
    list-style: none
}

ul.inline, ol.inline {
    margin-left: 0;
    list-style: none
}

ul.inline > li, ol.inline > li {
    display: inline-block;
    *display: inline;
    padding-right: 5px;
    padding-left: 5px;
    *zoom: 1
}

.list-view > .item {
    padding: 10px;
    position: relative;
    overflow: hidden
}

/*禁止换行*/
.list-view > .item .date {
    font-size: 12px;
    font-family: Arial;
    color: #999
}

/*横向手机 竖向平板*/
@media (max-width: 767px) {
    .list-view > .item {
        font-size: 18px;
        padding: 11px 15px;
        border-bottom: 1px solid #eee
    }

    .list-view > .item > a {
        display: block;
        margin: -11px -15px
    }

    .night .list-view > .item {
        border-bottom: 1px solid #1F1F1F
    }

    .list-view > .item .date {
        display: none
    }

    .list-view > .item .Hui-iconfont {
        background-size: 9px auto;
        margin-top: -7px;
        position: absolute;
        right: 15px;
        top: 50%
    }
}

/*排行榜*/
/*<ol class="list-view list-top"><li class="item"><em class="num">1</em><a href="#">排行榜列表</a><span class="date">12</span></li></ol>*/
.list-top > .item {
    padding-left: 30px
}

.list-top > .item .num {
    position: absolute;
    top: 11px;
    display: block;
    width: 20px;
    height: 20px;
    color: #fff;
    background-color: #5a98de;
    text-align: center
}

/*3.1.23 描述
	Name:			style_dldtdd
	Example:		<dl class="dl-horizontal cl"><dt>H-ui</dt><dd>基于Bootstrap框架的改进扩展的前端框架</dd></dl>
	Explain:		.dl-horizontal 水平描述，默认不加为垂直模式。
*/
.dl-horizontal.cl {
}

.dl-horizontal dt {
    float: left;
    width: 160px;
    overflow: hidden;
    clear: left;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap
}

.dl-horizontal dd {
    margin-left: 180px
}

/*3.1.24 隐藏 显示
  Name:				style_display
  Example:    <div class="hide">隐藏的内容</div> <div class="show">显示的内容</div>
  Explain:    		.hide 隐藏 / .show 显示
*/
.hide {
    display: none
}

[hidden] {
    display: none
}

.hidden {
    display: none !important;
    visibility: hidden !important
}

.f-hide {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0
}

[class*="span"].hide, .row-fluid [class*="span"].hide {
    display: none
}

.show {
    display: block
}

.invisible {
    visibility: hidden
}

/*3.1.25 尺寸	新增尺寸全局类名，用于表单、按钮、表格、头像、标签等元素上，要与元素一起配合使用，方能看到效果*/
.size-MINI {
}

/*迷你*/
.size-S {
}

/*小*/
.size-M {
}

/*中 缺省默认尺寸，可以不写，可以理解为：均码*/
.size-L {
}

/*L*/
.size-XL {
}

/*大*/
.size-XXL {
}

/*加大*/
.size-XXXL {
}

/*超大*/

.input-text, .btn, .input-text.size-M, .btn.size-M {
    font-size: 14px;
    height: 31px;
    *height: auto;
    line-height: 1.42857;
    padding: 4px 10px;
}

/*默认为M，可以不写，可以理解为：均码*/
a.btn, a.btn.size-M, span.btn, span.btn.size-M {
    line-height: 21px
}

.btn, .btn.size-M {
    padding: 4px 12px
}

.input-text.size-MINI, .btn.size-MINI {
    font-size: 12px;
    height: 23px;
    padding: 1px 2px;
    line-height: 1.42857
}

/*迷你*/
a.btn.size-MINI, span.btn.size-MINI {
    line-height: 21px
}

.btn.size-MINI {
    padding: 1px 4px
}

.input-text.size-S, .btn.size-S {
    font-size: 12px;
    height: 27px;
    padding: 3px;
    line-height: 1.42857
}

/*小*/
a.btn.size-S, span.btn.size-S {
    line-height: 19px
}

.btn.size-S {
    padding: 3px 8px
}

.input-text.size-L, .btn.size-L {
    font-size: 16px;
    height: 41px;
    padding: 8px
}

/*大*/
a.btn.size-L, span.btn.size-L {
    line-height: 23px
}

.btn.size-L {
    padding: 8px 16px
}

.input-text.size-XL, .btn.size-XL {
    font-size: 18px;
    height: 48px;
    padding: 10px
}

/*特大*/
a.btn.size-XL, span.btn.size-XL {
    line-height: 26px
}

.btn.size-XL {
    padding: 10px 24px
}

@media (max-width: 767px) {
    .responsive .input-text.size-MINI,
    .responsive .btn.size-MINI {
        height: 24px
    }

    .responsive .input-text.size-S,
    .responsive .btn.size-S {
        font-size: 14px;
        height: 30px
    }

    .responsive .input-text,
    .responsive .btn,
    .responsive .input-text.size-M,
    .responsive .btn.size-M {
        font-size: 16px;
        height: 36px
    }

    .responsive .input-text.size-L,
    .responsive .btn.size-L {
        font-size: 18px;
        height: 42px
    }

    .responsive .input-text.size-XL,
    .responsive .btn.size-XL {
        font-size: 20px;
        height: 48px
    }
}

/*3.2 代码
	Name:			style_pre

	Example:		<code></code>,<pre class="prettyprint linenums">转义过的代码</pre>
	Explain:		code：行内代码，pre：基本代码块;包装代码片段，.prettyprint颜色增强/.linenums显示行号
*/
code {
    padding: 0 3px 2px;
    font-family: Monaco, Menlo, Consolas, "Courier New", monospace
}

pre .title, pre .keyword, pre .body, pre .des {
    color: #333
}

/*关键词*/

pre {
    display: block;
    font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
    padding: 9.5px;
    margin-bottom: 10px;
    font-size: 12px;
    line-height: 20px;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre;
    white-space: pre-wrap;
    background-color: #f5f5f5;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: #333
}

.prettyprint {
    margin-bottom: 20px;
    padding: 8px;
    background-color: #f7f7f9;
    border: 1px solid #e1e1e8
}

.prettyprint .com {
    color: #998;
    font-style: italic
}

/*注释*/
.prettyprint .tag {
    color: #007
}

/*标签*/
.prettyprint .lit {
    color: #195f91
}

.prettyprint .pun, .prettyprint .opn, .prettyprint .clo {
    color: #93a1a1
}

/*等于*/
.prettyprint .fun {
    color: #dc322f
}

.prettyprint .str, .prettyprint .atv {
    color: #D14
}

/*值*/
.prettyprint .kwd, .prettyprint .prettyprint .tag {
    color: #1e347b
}

.prettyprint .typ, .prettyprint .atn, .prettyprint .dec, .prettyprint .var {
    color: teal
}

/*文档声明，属性*/
.prettyprint .pln {
    color: #48484c
}

.prettyprint.linenums {
    box-shadow: inset 40px 0 0 #fbfbfc, inset 41px 0 0 #ececf0
}

.pre-scrollable {
    max-height: 340px;
    overflow-y: scroll
}

ol.linenums {
    list-style: decimal outside none;
    margin-left: 20px
}

ol.linenums li {
    line-height: 28px;
    padding-left: 10px
}

pre ol.linenums {
    margin: 0 0 0 33px
}

pre ol.linenums li {
    padding-left: 12px;
    color: #bbb;
    line-height: 18px;
    text-shadow: 0 1px 0 #fff
}

@media (max-width: 767px) {
    pre ol.linenums {
        margin-left: 0;
        list-style: none
    }

    ol.linenums li {
        padding-left: 0
    }

    .prettyprint.linenums {
        box-shadow: inset 0px 0 0 #fbfbfc, inset 0px 0 0 #ececf0
    }
}

/*3.3 表格
	Name:			style_table
	Example:		<table class="table table-bordered table-striped table-condensed"><thead><tr><th>…</th></tr></thead><tbody><tr><td>…</td></tr></tbody></table>
	Explain:		表格，None无样式，仅仅有列和行|.table行与行之间以水平线相隔|.table-bordered表格外围均有外边框|.table-striped奇数行背景设为浅灰色|.table-condensed竖直方向padding缩减一半，从8px变为4px，所有的 td 和 th 元素都受影响
*/
/*默认table*/
table {
    width: 100%;
    empty-cells: show;
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0
}

table th {
    text-align: left;
    font-weight: 400
}

/*带水平线*/
.table th {
    font-weight: bold
}

.table th, .table td {
    padding: 8px;
    line-height: 20px;
    word-break: break-all
}

.table td {
    text-align: left
}

.table tbody tr.success > td {
    background-color: #dff0d8
}

.table tbody tr.error > td {
    background-color: #f2dede
}

.table tbody tr.warning > td {
    background-color: #fcf8e3
}

.table tbody tr.info > td {
    background-color: #d9edf7
}

.table tbody + tbody {
    border-top: 2px solid #ddd
}

.table .table {
    background-color: #fff
}

/*带横向分割线*/
.table-border {
    border-top: 1px solid rgb(102, 65, 65)
}

.table-border th, .table-border td {
    border-bottom: 1px solid #ddd
}

/*th带背景*/
.table-bg thead th {
    background-color: #F5FAFE
}

/*带外边框*/
.table-bordered {
    border: 1px solid #ddd;
    border-collapse: separate;
    *border-collapse: collapse;
    border-left: 0
}

.table-bordered th, .table-bordered td {
    border-left: 1px solid #ddd
}

.table-border.table-bordered {
    border-bottom: 0
}

/*奇数行背景设为浅灰色*/
.table-striped tbody > tr:nth-child(odd) > td,
.table-striped tbody > tr:nth-child(odd) > th {
    background-color: #f9f9f9
}

/*竖直方向padding缩减一半*/
.table-condensed th,
.table-condensed td {
    padding: 4px 5px
}

/*鼠标悬停样式*/
.table-hover tbody tr:hover td,
.table-hover tbody tr:hover th {
    background-color: #f5f5f5
}

/*鼠标选择整行样式*/
.table tbody tr.selected td {
    background-color: #F3F3F3
}

/*定义颜色*/
/*悬停在行*/
.table tbody tr.active,
.table tbody tr.active > td,
.table tbody tr.active > th,
.table tbody tr .active {
    background-color: #F5F5F5 !important
}

/*成功或积极*/
.table tbody tr.success,
.table tbody tr.success > td,
.table tbody tr.success > th,
.table tbody tr .success {
    background-color: #DFF0D8 !important
}

/*警告或出错*/
.table tbody tr.warning,
.table tbody tr.warning > td,
.table tbody tr.warning > th,
.table tbody tr .warning {
    background-color: #FCF8E3 !important
}

/*危险*/
.table tbody tr.danger,
.table tbody tr.danger > td,
.table tbody tr.danger > th,
.table tbody tr .danger {
    background-color: #F2DEDE !important
}

/*表格文字对齐方式，默认是居左对齐*/
.table .text-c th, .table .text-c td {
    text-align: center
}

/*整行居中*/
.table .text-r th, .table .text-r td {
    text-align: right
}

/*整行居右*/
.table th.text-l, .table td.text-l {
    text-align: left !important
}

/*单独列居左*/
.table th.text-c, .table td.text-c {
    text-align: center !important
}

/*单独列居中*/
.table th.text-r, .table td.text-r {
    text-align: right !important
}

/*单独列居右*/

/*圆角*/
.table.radius thead th:first-child {
    border-top-left-radius: 4px;
}

.table.radius thead th:last-child {
    border-top-right-radius: 4px;
}

.table.radius tr:last-child td:first-child {
    border-bottom-left-radius: 4px;
}

.table.radius tr:last-child td:last-child {
    border-bottom-right-radius: 4px;
}

/*datatable*/
table.dataTable {
    border-collapse: separate;
    border-spacing: 0;
    clear: both
}

table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting {
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: right center
}

table.dataTable thead .sorting {
    background-image: url(../images/dataTable/sort_both.png)
}

table.dataTable thead .sorting_asc {
    background-image: url(../images/dataTable/sort_asc.png)
}

table.dataTable thead .sorting_desc {
    background-image: url(../images/dataTable/sort_desc.png)
}

.dataTable td.sorting_1 {
    background-color: #f5fafe
}

.dataTables_wrapper .dataTables_length {
    float: left;
    padding-bottom: 20px
}

.dataTables_wrapper .dataTables_length .select {
    width: 50px
}

.dataTables_wrapper .dataTables_filter {
    float: right;
    text-align: right
}

.dataTables_wrapper .dataTables_filter .input-text {
    width: auto
}

.dataTables_wrapper .dataTables_info {
    clear: both;
    float: left;
    padding-top: 10px;
    font-size: 14px;
    color: #666
}

.dataTables_wrapper .dataTables_paginate {
    float: right;
    padding-top: 10px;
    text-align: right
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    border: 1px solid #ccc;
    cursor: pointer;
    display: inline-block;
    margin-left: 2px;
    text-align: center;
    text-decoration: none;
    color: #666;
    height: 26px;
    line-height: 26px;
    text-decoration: none;
    margin: 0 0px 6px 6px;
    padding: 0 10px;
    font-size: 14px
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #5a98de;
    color: #fff
}

/*表格尺寸*/
.table.size-MINI {
}

/*迷你*/
.table.size-S {
}

/*小*/
.table.size-M {
}

/*中*/
.table.size-L {
}

/*默认为L，可以不写，可以理解为：均码*/
.table.size-XL {
}

/*大*/
.table.size-XXL {
}

/*加大*/
.table.size-XXXL {
}

/*超大*/

/*让表格支持响应式*/
/*
<div class="table-responsive">
  <table class="table">
    ...
  </table>
</div>
*/
@media (max-width: 767px) {
    /*.table-responsive {width: 100%;margin-bottom: 15px;overflow-x: scroll;overflow-y: hidden;border: 1px solid #ddd;-ms-overflow-style: -ms-autohiding-scrollbar;-webkit-overflow-scrolling: touch}
	.table-responsive > .table {margin-bottom: 0}
	.table-responsive > .table > thead > tr > th,
	.table-responsive > .table > tbody > tr > th,
	.table-responsive > .table > tfoot > tr > th,
	.table-responsive > .table > thead > tr > td,
	.table-responsive > .table > tbody > tr > td,
	.table-responsive > .table > tfoot > tr > td {white-space: nowrap}
	.table-responsive > .table-bordered {border: 0}
	.table-responsive > .table-bordered > thead > tr > th:first-child,
	.table-responsive > .table-bordered > tbody > tr > th:first-child,
	.table-responsive > .table-bordered > tfoot > tr > th:first-child,
	.table-responsive > .table-bordered > thead > tr > td:first-child,
	.table-responsive > .table-bordered > tbody > tr > td:first-child,
	.table-responsive > .table-bordered > tfoot > tr > td:first-child {border-left: 0}
	.table-responsive > .table-bordered > thead > tr > th:last-child,
	.table-responsive > .table-bordered > tbody > tr > th:last-child,
	.table-responsive > .table-bordered > tfoot > tr > th:last-child,
	.table-responsive > .table-bordered > thead > tr > td:last-child,
	.table-responsive > .table-bordered > tbody > tr > td:last-child,
	.table-responsive > .table-bordered > tfoot > tr > td:last-child {border-right: 0}
	.table-responsive > .table-bordered > tbody > tr:last-child > th,
	.table-responsive > .table-bordered > tfoot > tr:last-child > th,
	.table-responsive > .table-bordered > tbody > tr:last-child > td,
	.table-responsive > .table-bordered > tfoot > tr:last-child > td {border-bottom: 0}
	*/
    .table-responsive th, .table-responsive td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }

}

/*3.4 表单
	Name:			style_form
	Example:
	Explain:

*/
/*3.4.1 input,textarea 文本域 文本区域*/
/*默认状态*/
.input-text, .textarea {
    box-sizing: border-box;
    border: solid 1px #ddd;
    width: 100%;
    -webkit-transition: all 0.2s linear 0s;
    -moz-transition: all 0.2s linear 0s;
    -o-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s
}

.textarea {
    height: 100px;
    resize: none;
    font-size: 14px;
    padding: 4px;
    word-break: break-all;
}

.textarea-numberbar {
    position: absolute;
    right: 20px;
    bottom: 5px;
    z-index: 1;
    margin-bottom: 0
}

.textarea-length {
    font-style: normal
}

.input-text:hover,
.textarea:hover {
    border: solid 1px #3bb4f2
}

/*得到焦点后*/
.input-text.focus,
.textarea.focus {
    border: solid 1px #0f9ae0 \9;
    border-color: rgba(82, 168, 236, 0.8);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6)
}

/*不可点击*/
.input-text.disabled, .textarea.disabled,
.input-text.disabled.focus,
.textarea.disabled.focus {
    background-color: #ededed;
    cursor: default;
    border-color: #ddd;
    -webkit-box-shadow: inset 0 2px 2px #e8e7e7;
    -moz-box-shadow: inset 0 2px 2px #e8e7e7;
    box-shadow: inset 0 2px 2px #e8e7e7
}

/*只读状态*/
.input-text.disabled,
.textarea.disabled {
    background-color: #e6e6e6;
    cursor: default
}

/*阴影*/
.input-text.box-shadow,
.textarea.box-shadow {
    -ms-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075)
}

/*行内元素*/
.input-text.inline {
    display: inline-block;
    width: auto
}

/*3.4.2 checkbox radio  单选 多选
	Example:
<div class="skin-minimal">
  <div class="check-box">
    <input type="checkbox" id="checkbox-1">
    <label for="checkbox-1">复选框</label>
  </div>
</div>

<div class="skin-minimal">
  <div class="radio-box">
    <input type="radio" id="minimal-radio-1" name="demo-radio1">
    <label for="minimal-radio-1">单选按钮</label>
  </div>
</div>
	Explain:
*/

input[type="radio"], input[type="checkbox"] {
    line-height: normal;
    margin-top: -4px
}

.check-box, .radio-box {
    display: inline-block;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    padding-left: 30px;
    padding-right: 20px
}

.icheckbox,
.icheckbox-red,
.icheckbox-green,
.icheckbox-blue,
.icheckbox-aero,
.icheckbox-grey,
.icheckbox-orange,
.icheckbox-yellow,
.icheckbox-pink,
.icheckbox-purple,
.iradio,
.iradio-red,
.iradio-green,
.iradio-blue,
.iradio-aero,
.iradio-grey,
.iradio-orange,
.iradio-yellow,
.iradio-pink,
.iradio-purple {
    position: absolute;
    top: 4px;
    left: 0
}

@media (max-width: 767px) {
    .responsive .check-box,
    .responsive .radio-box {
        display: block
    }
}

/*3.4.2.1 jQuery.icheck.css*/
/* iCheck.js Minimal skin
----------------------------------- */
.icheckbox, .iradio {
    display: block;
    margin: 0;
    padding: 0;
    width: 18px;
    height: 18px;
    background: url(../images/iCheck/minimal.png) no-repeat;
    border: none;
    cursor: pointer
}

.icheckbox, .icheckbox.static:hover {
    background-position: 0 0
}

.icheckbox.hover, .icheckbox:hover {
    background-position: -20px 0
}

.icheckbox.checked {
    background-position: -40px 0
}

.icheckbox.disabled {
    background-position: -60px 0;
    cursor: default
}

.icheckbox.checked.disabled {
    background-position: -80px 0
}

.iradio, .iradio.static:hover {
    background-position: -100px 0
}

.iradio.hover, .iradio:hover {
    background-position: -120px 0
}

.iradio.checked {
    background-position: -140px 0
}

.iradio.disabled {
    background-position: -160px 0;
    cursor: default
}

.iradio.checked.disabled {
    background-position: -180px 0
}

/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
    .icheckbox, .iradio {
        background-image: url(../images/iCheck/minimal@2x.png);
        -webkit-background-size: 200px 20px;
        background-size: 200px 20px
    }
}

/* red */
.icheckbox-red, .iradio-red {
    display: block;
    margin: 0;
    padding: 0;
    width: 18px;
    height: 18px;
    background: url(../images/iCheck/red.png) no-repeat;
    border: none;
    cursor: pointer
}

.icheckbox-red, .icheckbox-red.static:hover {
    background-position: 0 0
}

.icheckbox-red.hover, .icheckbox-red:hover {
    background-position: -20px 0
}

.icheckbox-red.checked {
    background-position: -40px 0
}

.icheckbox-red.disabled {
    background-position: -60px 0;
    cursor: default
}

.icheckbox-red.checked.disabled {
    background-position: -80px 0
}

.iradio-red, .iradio-red.static:hover {
    background-position: -100px 0
}

.iradio-red.hover, .iradio-red:hover {
    background-position: -120px 0
}

.iradio-red.checked {
    background-position: -140px 0
}

.iradio-red.disabled {
    background-position: -160px 0;
    cursor: default
}

.iradio-red.checked.disabled {
    background-position: -180px 0
}

/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
    .icheckbox-red, .iradio-red {
        background-image: url(../images/iCheck/red@2x.png);
        -webkit-background-size: 200px 20px;
        background-size: 200px 20px
    }
}

/* green */
.icheckbox-green, .iradio-green {
    display: block;
    margin: 0;
    padding: 0;
    width: 18px;
    height: 18px;
    background: url(../images/iCheck/green.png) no-repeat;
    border: none;
    cursor: pointer
}

.icheckbox-green, .icheckbox-green.static:hover {
    background-position: 0 0
}

.icheckbox-green.hover, .icheckbox-green:hover {
    background-position: -20px 0
}

.icheckbox-green.checked {
    background-position: -40px 0
}

.icheckbox-green.disabled {
    background-position: -60px 0;
    cursor: default
}

.icheckbox-green.checked.disabled {
    background-position: -80px 0
}

.iradio-green, .iradio-green.static:hover {
    background-position: -100px 0
}

.iradio-green.hover, .iradio-green:hover {
    background-position: -120px 0
}

.iradio-green.checked {
    background-position: -140px 0
}

.iradio-green.disabled {
    background-position: -160px 0;
    cursor: default
}

.iradio-green.checked.disabled {
    background-position: -180px 0
}

/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
    .icheckbox-green, .iradio-green {
        background-image: url(../images/iCheck/green@2x.png);
        -webkit-background-size: 200px 20px;
        background-size: 200px 20px
    }
}

/* blue */
.icheckbox-blue, .iradio-blue {
    display: block;
    margin: 0;
    padding: 0;
    width: 18px;
    height: 18px;
    background: url(../images/iCheck/blue.png) no-repeat;
    border: none;
    cursor: pointer
}

.icheckbox-blue, .icheckbox-blue.static:hover {
    background-position: 0 0
}

.icheckbox-blue.hover, .icheckbox-blue:hover {
    background-position: -20px 0
}

.icheckbox-blue.checked {
    background-position: -40px 0
}

.icheckbox-blue.disabled {
    background-position: -60px 0;
    cursor: default
}

.icheckbox-blue.checked.disabled {
    background-position: -80px 0
}

.iradio-blue, .iradio-blue.static:hover {
    background-position: -100px 0
}

.iradio-blue.hover, .iradio-blue:hover {
    background-position: -120px 0
}

.iradio-blue.checked {
    background-position: -140px 0
}

.iradio-blue.disabled {
    background-position: -160px 0;
    cursor: default
}

.iradio-blue.checked.disabled {
    background-position: -180px 0
}

/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
    .icheckbox-blue, .iradio-blue {
        background-image: url(../images/iCheck/blue@2x.png);
        -webkit-background-size: 200px 20px;
        background-size: 200px 20px
    }
}

/* aero */
.icheckbox-aero, .iradio-aero {
    display: block;
    margin: 0;
    padding: 0;
    width: 18px;
    height: 18px;
    background: url(../images/iCheck/aero.png) no-repeat;
    border: none;
    cursor: pointer
}

.icheckbox-aero, .icheckbox-aero.static:hover {
    background-position: 0 0
}

.icheckbox-aero.hover, .icheckbox-aero:hover {
    background-position: -20px 0
}

.icheckbox-aero.checked {
    background-position: -40px 0
}

.icheckbox-aero.disabled {
    background-position: -60px 0;
    cursor: default
}

.icheckbox-aero.checked.disabled {
    background-position: -80px 0
}

.iradio-aero, .iradio-aero.static:hover {
    background-position: -100px 0
}

.iradio-aero.hover, .iradio-aero:hover {
    background-position: -120px 0
}

.iradio-aero.checked {
    background-position: -140px 0
}

.iradio-aero.disabled {
    background-position: -160px 0;
    cursor: default
}

.iradio-aero.checked.disabled {
    background-position: -180px 0
}

/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
    .icheckbox-aero, .iradio-aero {
        background-image: url(../images/iCheck/aero@2x.png);
        -webkit-background-size: 200px 20px;
        background-size: 200px 20px
    }
}

/* grey */
.icheckbox-grey, .iradio-grey {
    display: block;
    margin: 0;
    padding: 0;
    width: 18px;
    height: 18px;
    background: url(../images/iCheck/grey.png) no-repeat;
    border: none;
    cursor: pointer
}

.icheckbox-grey, .icheckbox-grey.static:hover {
    background-position: 0 0
}

.icheckbox-grey.hover, .icheckbox-grey:hover {
    background-position: -20px 0
}

.icheckbox-grey.checked {
    background-position: -40px 0
}

.icheckbox-grey.disabled {
    background-position: -60px 0;
    cursor: default
}

.icheckbox-grey.checked.disabled {
    background-position: -80px 0
}

.iradio-grey, .iradio-grey.static:hover {
    background-position: -100px 0
}

.iradio-grey.hover, .iradio-grey:hover {
    background-position: -120px 0
}

.iradio-grey.checked {
    background-position: -140px 0
}

.iradio-grey.disabled {
    background-position: -160px 0;
    cursor: default
}

.iradio-grey.checked.disabled {
    background-position: -180px 0
}

/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
    .icheckbox-grey, .iradio-grey {
        background-image: url(../images/iCheck/grey@2x.png);
        -webkit-background-size: 200px 20px;
        background-size: 200px 20px
    }
}

/* orange */
.icheckbox-orange, .iradio-orange {
    display: block;
    margin: 0;
    padding: 0;
    width: 18px;
    height: 18px;
    background: url(../images/iCheck/orange.png) no-repeat;
    border: none;
    cursor: pointer
}

.icheckbox-orange, .icheckbox-orange.static:hover {
    background-position: 0 0
}

.icheckbox-orange.hover, .icheckbox-orange:hover {
    background-position: -20px 0
}

.icheckbox-orange.checked {
    background-position: -40px 0
}

.icheckbox-orange.disabled {
    background-position: -60px 0;
    cursor: default
}

.icheckbox-orange.checked.disabled {
    background-position: -80px 0
}

.iradio-orange, .iradio-orange.static:hover {
    background-position: -100px 0
}

.iradio-orange.hover, .iradio-orange:hover {
    background-position: -120px 0
}

.iradio-orange.checked {
    background-position: -140px 0
}

.iradio-orange.disabled {
    background-position: -160px 0;
    cursor: default
}

.iradio-orange.checked.disabled {
    background-position: -180px 0
}

/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
    .icheckbox-orange, .iradio-orange {
        background-image: url(../images/iCheck/orange@2x.png);
        -webkit-background-size: 200px 20px;
        background-size: 200px 20px
    }
}

/* yellow */
.icheckbox-yellow, .iradio-yellow {
    display: block;
    margin: 0;
    padding: 0;
    width: 18px;
    height: 18px;
    background: url(../images/iCheck/yellow.png) no-repeat;
    border: none;
    cursor: pointer
}

.icheckbox-yellow, .icheckbox-yellow.static:hover {
    background-position: 0 0
}

.icheckbox-yellow.hover, .icheckbox-yellow:hover {
    background-position: -20px 0
}

.icheckbox-yellow.checked {
    background-position: -40px 0
}

.icheckbox-yellow.disabled {
    background-position: -60px 0;
    cursor: default
}

.icheckbox-yellow.checked.disabled {
    background-position: -80px 0
}

.iradio-yellow, .iradio-yellow.static:hover {
    background-position: -100px 0
}

.iradio-yellow.hover, .iradio-yellow:hover {
    background-position: -120px 0
}

.iradio-yellow.checked {
    background-position: -140px 0
}

.iradio-yellow.disabled {
    background-position: -160px 0;
    cursor: default
}

.iradio-yellow.checked.disabled {
    background-position: -180px 0
}

/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
    .icheckbox-yellow, .iradio-yellow {
        background-image: url(../images/iCheck/yellow@2x.png);
        -webkit-background-size: 200px 20px;
        background-size: 200px 20px
    }
}

/* pink */
.icheckbox-pink, .iradio-pink {
    display: block;
    margin: 0;
    padding: 0;
    width: 18px;
    height: 18px;
    background: url(../images/iCheck/pink.png) no-repeat;
    border: none;
    cursor: pointer
}

.icheckbox-pink, .icheckbox-pink.static:hover {
    background-position: 0 0
}

.icheckbox-pink.hover, .icheckbox-pink:hover {
    background-position: -20px 0
}

.icheckbox-pink.checked {
    background-position: -40px 0
}

.icheckbox-pink.disabled {
    background-position: -60px 0;
    cursor: default
}

.icheckbox-pink.checked.disabled {
    background-position: -80px 0
}

.iradio-pink, .iradio-pink.static:hover {
    background-position: -100px 0
}

.iradio-pink.hover, .iradio-pink:hover {
    background-position: -120px 0
}

.iradio-pink.checked {
    background-position: -140px 0
}

.iradio-pink.disabled {
    background-position: -160px 0;
    cursor: default
}

.iradio-pink.checked.disabled {
    background-position: -180px 0
}

/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
    .icheckbox-pink, .iradio-pink {
        background-image: url(../images/iCheck/pink@2x.png);
        -webkit-background-size: 200px 20px;
        background-size: 200px 20px
    }
}

/* purple */
.icheckbox-purple, .iradio-purple {
    display: block;
    margin: 0;
    padding: 0;
    width: 18px;
    height: 18px;
    background: url(../images/iCheck/purple.png) no-repeat;
    border: none;
    cursor: pointer
}

.icheckbox-purple, .icheckbox-purple.static:hover {
    background-position: 0 0
}

.icheckbox-purple.hover, .icheckbox-purple:hover {
    background-position: -20px 0
}

.icheckbox-purple.checked {
    background-position: -40px 0
}

.icheckbox-purple.disabled {
    background-position: -60px 0;
    cursor: default
}

.icheckbox-purple.checked.disabled {
    background-position: -80px 0
}

.iradio-purple, .iradio-purple.static:hover {
    background-position: -100px 0
}

.iradio-purple.hover, .iradio-purple:hover {
    background-position: -120px 0
}

.iradio-purple.checked {
    background-position: -140px 0
}

.iradio-purple.disabled {
    background-position: -160px 0;
    cursor: default
}

.iradio-purple.checked.disabled {
    background-position: -180px 0
}

/* Retina support */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
    .icheckbox-purple, .iradio-purple {
        background-image: url(../images/iCheck/purple@2x.png);
        -webkit-background-size: 200px 20px;
        background-size: 200px 20px
    }
}

/*3.4.2.2 Bootsrtap.Switch.css*/
.has-switch {
    display: inline-block;
    cursor: pointer;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    position: relative;
    text-align: left;
    overflow: hidden;
    line-height: 8px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
    min-width: 100px
}

.has-switch.size-MINI {
    min-width: 72px
}

.has-switch.size-S {
    min-width: 80px
}

.has-switch.size-L {
    min-width: 120px
}

.has-switch.deactivate {
    opacity: .5;
    filter: alpha(opacity=50);
    cursor: default !important
}

.has-switch.deactivate label,
.has-switch.deactivate span {
    cursor: default !important
}

.has-switch > div {
    display: inline-block;
    width: 150%;
    position: relative;
    top: 0
}

.has-switch > div.switch-animate {
    -webkit-transition: left .5s;
    -moz-transition: left .5s;
    -o-transition: left .5s;
    transition: left .5s
}

.has-switch > div.switch-off {
    left: -50%
}

.has-switch > div.switch-on {
    left: 0
}

.has-switch input[type=checkbox] {
    display: none
}

.has-switch span, .has-switch label {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    cursor: pointer;
    position: relative;
    display: inline-block;
    padding-bottom: 4px;
    padding-top: 4px;
    font-size: 14px;
    line-height: 20px
}

.has-switch span.size-MINI, .has-switch label.size-MINI {
    padding-bottom: 4px;
    padding-top: 4px;
    font-size: 10px;
    line-height: 9px
}

.has-switch span.size-S,
.has-switch label.size-S {
    padding-bottom: 3px;
    padding-top: 3px;
    font-size: 12px;
    line-height: 18px
}

.has-switch span.size-L, .has-switch label.size-L {
    padding-bottom: 9px;
    padding-top: 9px;
    font-size: 16px;
    line-height: normal
}

.has-switch label {
    text-align: center;
    margin-top: -1px;
    margin-bottom: -1px;
    z-index: 100;
    width: 34%;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #f5f5f5;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e6e6e6));
    background-image: linear-gradient(to bottom, #fff, #e6e6e6);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    *background-color: #e6e6e6;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false)
}

.has-switch label:hover,
.has-switch label:focus,
.has-switch label:active,
.has-switch label.active,
.has-switch label.disabled,
.has-switch label[disabled] {
    color: #fff;
    background-color: #e6e6e6;
    *background-color: #d9d9d9
}

.has-switch label:active,
.has-switch label.active {
    background-color: #ccc \9
}

.has-switch label i {
    color: #000;
    text-shadow: 0 1px 0 #fff;
    line-height: 18px;
    pointer-events: none
}

.has-switch span {
    text-align: center;
    z-index: 1;
    width: 33%
}

.has-switch span.switch-left {
    -webkit-border-top-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-bottom-left-radius: 4px
}

.has-switch span.switch-right {
    color: #333;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    background-color: #f0f0f0;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e6e6e6), to(#fff));
    background-image: linear-gradient(to bottom, #e6e6e6, #fff);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe6e6e6', endColorstr='#ffffffff', GradientType=0);
    border-color: #fff #fff #d9d9d9;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    *background-color: #fff;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false)
}

.has-switch span.switch-right:hover,
.has-switch span.switch-right:focus,
.has-switch span.switch-right:active,
.has-switch span.switch-right.active,
.has-switch span.switch-right.disabled,
.has-switch span.switch-right[disabled] {
    color: #333;
    background-color: #fff;
    *background-color: #f2f2f2
}

.has-switch span.switch-right:active,
.has-switch span.switch-right.active {
    background-color: #e6e6e6 \9
}

.has-switch span.switch-primary,
.has-switch span.switch-left {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #005fcc;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#04c), to(#08c));
    background-image: linear-gradient(to bottom, #04c, #08c);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0044cc', endColorstr='#ff0088cc', GradientType=0);
    border-color: #08c #08c #005580;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    *background-color: #08c;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false)
}

.has-switch span.switch-primary:hover,
.has-switch span.switch-left:hover,
.has-switch span.switch-primary:focus,
.has-switch span.switch-left:focus,
.has-switch span.switch-primary:active,
.has-switch span.switch-left:active,
.has-switch span.switch-primary.active,
.has-switch span.switch-left.active,
.has-switch span.switch-primary.disabled,
.has-switch span.switch-left.disabled,
.has-switch span.switch-primary[disabled],
.has-switch span.switch-left[disabled] {
    color: #fff;
    background-color: #08c;
    *background-color: #0077b3
}

.has-switch span.switch-primary:active,
.has-switch span.switch-left:active,
.has-switch span.switch-primary.active,
.has-switch span.switch-left.active {
    background-color: #069 \9
}

.has-switch span.switch-info {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #41a7c5;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#2f96b4), to(#5bc0de));
    background-image: linear-gradient(to bottom, #2f96b4, #5bc0de);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff2f96b4', endColorstr='#ff5bc0de', GradientType=0);
    border-color: #5bc0de #5bc0de #28a1c5;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    *background-color: #5bc0de;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false)
}

.has-switch span.switch-info:hover,
.has-switch span.switch-info:focus,
.has-switch span.switch-info:active,
.has-switch span.switch-info.active,
.has-switch span.switch-info.disabled,
.has-switch span.switch-info[disabled] {
    color: #fff;
    background-color: #5bc0de;
    *background-color: #46b8da
}

.has-switch span.switch-info:active,
.has-switch span.switch-info.active {
    background-color: #31b0d5 \9
}

.has-switch span.switch-success {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #58b058;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#51a351), to(#62c462));
    background-image: linear-gradient(to bottom, #51a351, #62c462);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff51a351', endColorstr='#ff62c462', GradientType=0);
    border-color: #62c462 #62c462 #3b9e3b;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    *background-color: #62c462;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false)
}

.has-switch span.switch-success:hover,
.has-switch span.switch-success:focus,
.has-switch span.switch-success:active,
.has-switch span.switch-success.active,
.has-switch span.switch-success.disabled,
.has-switch span.switch-success[disabled] {
    color: #fff;
    background-color: #62c462;
    *background-color: #4fbd4f
}

.has-switch span.switch-success:active,
.has-switch span.switch-success.active {
    background-color: #42b142 \9
}

.has-switch span.switch-warning {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #f9a123;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f89406), to(#fbb450));
    background-image: linear-gradient(to bottom, #f89406, #fbb450);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff89406', endColorstr='#fffbb450', GradientType=0);
    border-color: #fbb450 #fbb450 #f89406;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    *background-color: #fbb450;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false)
}

.has-switch span.switch-warning:hover,
.has-switch span.switch-warning:focus,
.has-switch span.switch-warning:active,
.has-switch span.switch-warning.active,
.has-switch span.switch-warning.disabled,
.has-switch span.switch-warning[disabled] {
    color: #fff;
    background-color: #fbb450;
    *background-color: #faa937
}

.has-switch span.switch-warning:active,
.has-switch span.switch-warning.active {
    background-color: #fa9f1e \9
}

.has-switch span.switch-danger {
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #d14641;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#bd362f), to(#ee5f5b));
    background-image: linear-gradient(to bottom, #bd362f, #ee5f5b);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffbd362f', endColorstr='#ffee5f5b', GradientType=0);
    border-color: #ee5f5b #ee5f5b #e51d18;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    *background-color: #ee5f5b;
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false)
}

.has-switch span.switch-danger:hover,
.has-switch span.switch-danger:focus,
.has-switch span.switch-danger:active,
.has-switch span.switch-danger.active,
.has-switch span.switch-danger.disabled,
.has-switch span.switch-danger[disabled] {
    color: #fff;
    background-color: #ee5f5b;
    *background-color: #ec4844
}

.has-switch span.switch-danger:active,
.has-switch span.switch-danger.active {
    background-color: #e9322d \9
}

/*3.4.3 select 下拉框
<span class="select-box">
  <select class="select" size="1" name="demo">
    <option value="1" selected>默认</option>
    <option value="2">菜单二</option>
    <option value="3">菜单三</option>
  </select>
</span>
	Explain:
	select 是表单元素中最难美化的一个，有两种美化方式：
		1、修改源生的，修改有限，只能修改个边框，背景，字体。优点：程序方便操作；缺点：丑，浏览器之间存在很大差异。
		2、将源生的隐藏掉，用其他元素（如div li）通过js模拟下拉交互，然后再传值给源生的select。优点：好看，兼容好；缺点：代码冗余，依赖JS，不方便操作
*/
/*方法一、修改源生*/
.select-box {
    border: solid 1px #ddd;
    box-sizing: border-box;
    vertical-align: middle;
    width: 100%;
    display: inline-block
}

.select {
    border: solid 1px #ddd;
    box-sizing: border-box;
    cursor: pointer;
    line-height: normal;
    font-weight: normal;
    width: 100%;
    white-space: nowrap
}

.select-box .select {
    border: none;
    background-color: transparent;
}

.select-box.inline,
.select-box.inline .select {
    width: auto
}

.select-box,
.select-box.size-M {
    padding: 4px 5px
}

.select, .size-M .select {
    font-size: 14px
}

.select-box.size-MINI {
    padding: 0px 5px
}

.size-MINI .select {
    font-size: 12px
}

.select-box.size-S {
    padding: 3px 5px
}

.size-S .select {
    font-size: 12px
}

.select-box.size-L {
    padding: 8px 5px
}

.size-L .select {
    font-size: 16px
}

.select-box.size-XL {
    padding: 10px 5px
}

.size-XL .select {
    font-size: 18px
}

@media (max-width: 767px) {
    .responsive .select-box {
        border: none
    }

    .responsive .select-box .select,
    .responsive .select {
        border: solid 1px #ddd;
        padding: 10px;
        font-size: 16px
    }

    .responsive .select-box,
    .responsive .select-box.size-M,
    .responsive .select-box.size-MINI,
    .responsive .select-box.size-S,
    .responsive .select-box.size-L,
    .responsive .select-box.size-XL {
        height: auto;
        padding: 0
    }
}

/*方法二、JS模拟
<select name="demo" data-enabled="false">
  <option value="1" selected>默认</option>
  <option value="2">菜单二</option>
  <option value="3">菜单三</option>
</select>
需要引用2个js文件
<script type="text/javascript" src="lib/squid.js"></script>
<script type="text/javascript" src="lib/jselect-1.0.js"></script>
页面调用方法
<script type="text/javascript">
squid.swing.jselect()
</script>
*/
.select-wrapper {
    position: relative;
    display: inline-block;
    font-size: 14px;
    cursor: default
}

.select-default {
    zoom: 1;
    display: block;
    padding-left: 10px;
    padding-right: 30px;
    background-color: #fff;
    border: solid 1px #d0d0d0;
    height: 34px;
    line-height: 34px
}

.jsselect.radius {
    overflow: visible
}

.jsselect.radius .select-default {
    border-radius: 4px
}

.jsselect.radius .select-list {
    border-radius: 4px;
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.select-icon {
    position: absolute;
    height: 8px;
    width: 12px;
    right: 10px;
    top: 50%;
    margin-top: -4px;
    background: url(../images/jselect/iconpic-arrow-down2.png) no-repeat center
}

.unselectable {
    -moz-user-select: none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none
}

.select-list {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 1;
    line-height: 34px;
    max-height: 320px;
    overflow: auto;
    background-color: #fff;
    background-clip: padding-box;
    _height: expression(this.scrollHeight > 319 ? "320px" : "auto");
    -moz-box-shadow: 0 1px 2px rgba(0, 1, 1, 0.2);
    -webkit-box-shadow: 0 1px 2px rgba(0, 1, 1, 0.2);
    box-shadow: 0 1px 2px rgba(0, 1, 1, 0.2);
    box-sizing: border-box;

    border: solid 1px #d0d0d0
}

.select-item {
    margin: 0;
    padding: 0
}

.select-option {
    background: #fff;
    line-height: 34px;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    border-bottom: 1px solid #f2f2f2;
    padding: 0 10px
}

.select-item .selected {
    background-color: #148cf1;
    color: #fff
}

/*3.4.4 input-file 文件上传
	Example:
<span class="btn-upload">
  <a style="z-index:2;" href="javascript:void();" class="btn btn-primary radius"><i class="iconfont">&#xf0020;</i> 浏览文件<input type="file" multiple name="file_0" class="input-file"></a>
</span>
	Explain：把文件选择域设为透明,通过绝对定位覆盖在长的好看的按钮上面。
*/
.btn-upload {
    position: relative;
    display: inline-block;
    height: 31px;
    *display: inline;
    overflow: hidden;
    vertical-align: middle;
    cursor: pointer
}

.upload-url {
    cursor: pointer;
    width: 300px
}

.input-file {
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
    z-index: 1;
    font-size: 30em;
    opacity: 0;
    filter: alpha(opacity=0)
}

.form-group .upload-btn {
    margin-left: -1px
}

.btn-upload .icon-add, .btn-upload .icon-minus {
    cursor: pointer;
    display: inline-block;
    font-family: Arial;
    font-size: 30px;
    height: 31px;
    line-height: 31px;
    text-align: center;
    vertical-align: middle;
    width: 36px
}

@media (max-width: 767px) {
    .upload-btn {
        display: none
    }

    .upload-url {
        display: none
    }
}

/*数字表单*/
.numberControlBox {
    display: inline-block;
    overflow: hidden;
    vertical-align: middle
}

.ncb-up, .ncb-down {
    font-size: 0px;
    display: block;
    height: 10px;
    background-color: #f4f4f4;
    background: -moz-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(230, 230, 230) 50%, rgb(255, 255, 255) 100%);
    width: 24px;
    border: 1px solid #d1d1d1;
    cursor: pointer
}

.ncb-up {
    margin-bottom: 1px
}

.numberControlBox .ncb_ico {
    display: block;
    height: 10px;
    background-image: url(../images/iconpic-arrow.png);
    background-repeat: no-repeat
}

.ncb-up .ncb_ico {
    background-position: -22px center
}

.ncb-down .ncb_ico {
    background-position: 1px center
}

.ncb_btn_hover {
    border: 1px solid #9dc7e7;
    background-color: #dff2fc;
    background: -moz-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(210, 237, 250) 50%, rgb(255, 255, 255) 100%)
}

.ncb_btn_selected {
    border: 1px solid #6198c2;
    background-color: #aee1fb;
    background: -moz-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(174, 225, 251) 50%, rgb(255, 255, 255) 100%)
}

.input-text[type="number"] {
    width: 80px
}

/*3.4.5 spinner 控件*/
.spinner {
    display: block;
    overflow: hidden;
    width: 100px;
    position: relative;
    padding-left: 29px;
    padding-right: 29px;
}

.spinner .input-text {
    height: 30px;
    text-align: center;
    width: 100%
}

.spinner a {
    display: inline-block;
    position: absolute;
    top: 0;
    bottom: 0;
    height: 28px;
    line-height: 28px;
    width: 28px;
    cursor: pointer;
    outline: 0;
    text-decoration: none;
    text-align: center;
    font-size: 16px;
    border: 1px solid #ddd;
    background-color: #f7f7f7;
}

.spinner a:hover {
    text-decoration: none
}

.spinner a i {
    font-style: normal;
}

.spinner a.subtract {
    left: 0
}

.spinner a.add {
    right: 0
}

.spinner a.add.disabled,
.spinner a.subtract.disabled {
    color: #999;
    cursor: not-allowed
}


/*3.4.6 邮箱提示*/
.emailSug-wrapper {
    position: absolute;
    background: #fff;
    text-align: left;
    z-index: 99
}

.emailSug-wrapper .emailSug-list .emailSug-item {
    font-size: 14px;
    height: 25px;
    line-height: 25px;
    padding-left: 10px;
    color: #333
}

.emailSug-wrapper .emailSug-list .emailSug-item.active {
    background: #5a98de;
    cursor: pointer;
    color: #fff
}

/*3.4.7 表单布局*/
label, .placeholder {
    font-size: 14px
}

.form legend {
    font-size: 20px
}

/*表单名称*/
.form .row {
    margin-top: 15px
}

/*表单行*/
.form-label {
    display: block;
    color: #555
}

/*表单标题*/
.formControls,
.form-controls {
    position: relative
}

/*表单控制区*/
.formControls > *,
.form-controls > * {
    vertical-align: middle
}

.placeholder {
    position: absolute;
    left: 4px;
    top: 4px;
    color: #c6c6c6;
    cursor: text
}

/*表单默认值*/
.form-horizontal .form-label {
    cursor: text;
    text-align: right;
    line-height: 28px;
}

.form-horizontal .form-controls {
    line-height: 28px;
}

.form-horizontal .Validform_checktip {
    margin-top: 5px;
}

/*设置placeholder颜色*/
::-webkit-input-placeholder {
    color: #b3b3b3
}

/* WebKit browsers */
:-moz-placeholder {
    color: #b3b3b3
}

/* Mozilla Firefox 4 to 18 */
::-moz-placeholder {
    color: #b3b3b3
}

/* Mozilla Firefox 19+ */
:-ms-input-placeholder {
    color: #b3b3b3
}

/* Internet Explorer 10+ */
.placeholder {
    color: #adb0be;
    position: absolute;
    z-index: 9
}

/*不兼容placeholder属性的浏览器，可使用<span class="placeholder">表单默认值</span>*/
@media (max-width: 767px) {
    .form-horizontal .form-label {
        text-align: left
    }
}

/*3.4.8 表单验证*/
/*文本框的错误状态*/
.Validform_error, input.error, select.error, textarea.error {
    background-color: #fbe2e2;
    border-color: #c66161;
    color: #c00
}

.Validform_wrong, .Validform_right, .Validform_warning {
    display: inline-block;
    height: 20px;
    font-size: 12px;
    vertical-align: middle;
    padding-left: 25px
}

/*错误*/
.Validform_wrong {
    background: url(../images/validform/iconpic-error.png) no-repeat 0 center;
    color: #ef392b
}

/*正确*/
.Validform_right {
    background: url(../images/validform/iconpic-right.png) no-repeat 0 center
}

/*警告*/
.Validform_warning {
    background: url(../images/validform/iconpic-warning.png) no-repeat 0 center;
    color: #777
}

label.error {
    position: absolute;
    right: 18px;
    top: 5px;
    color: #ef392b;
    font-size: 12px
}

.check-box label.error,
.radio-box label.error {
    right: auto;
    width: 150px;
    left: 210px;
    top: -2px
}

/*密码等级*/
.passwordStrength b {
    font-weight: 400
}

.passwordStrength b, .passwordStrength span {
    display: inline-block;
    vertical-align: middle;
    line-height: 16px;
    line-height: 18px \9;
    height: 16px
}

.passwordStrength span {
    width: 57px;
    text-align: center;
    background-color: #d0d0d0;
    border-right: 1px solid #fff
}

.passwordStrength .last {
    border-right: none
}

.passwordStrength .bgStrength {
    color: #fff;
    background-color: #fcc900
}

/*Validform对话框*/
#Validform_msg {
    font-size: 14px;
    width: 300px;
    -webkit-box-shadow: 2px 2px 3px #aaa;
    -moz-box-shadow: 2px 2px 3px #aaa;
    background: #fff;
    position: absolute;
    top: 0px;
    right: 50px;
    z-index: 99999;
    display: none;
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength=3, Direction=135, Color='#999999');
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1)
}

#Validform_msg .iframe {
    position: absolute;
    left: 0px;
    top: -1px;
    z-index: -1
}

#Validform_msg .Validform_title {
    font-size: 20px;
    padding: 10px;
    text-align: left;
    color: #fff;
    position: relative;
    background-color: #fcc900
}

#Validform_msg a.Validform_close:link, #Validform_msg a.Validform_close:visited {
    position: absolute;
    right: 8px;
    top: 6px;
    color: #fff;
    text-decoration: none;
    font-family: Verdana
}

#Validform_msg a.Validform_close:hover {
    color: #fff
}

#Validform_msg .Validform_info {
    padding: 10px;
    border: 1px solid #bbb;
    border-top: none;
    text-align: left
}

@media (max-width: 767px) {
    .responsive .Validform_checktip {
        margin-top: 10px
    }
}

/*3.5 按钮
	Name:			style_button
	Example:		<button class="btn radius radius btn-primary|btn-info|btn-success|btn-warning|btn-danger|btn-inverse|btn-link" type="button">按钮</button>
	Explain:		btn-primary：主要|btn-info：信息|btn-success：成功|btn-warning：警告|btn-danger：危险|btn-inverse：反向|btn-link：链接

*/
/*关闭*/
.close {
    font-size: 20px;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: 0.2;
    filter: alpha(opacity=20)
}

.close:hover, .close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: 0.4;
    filter: alpha(opacity=40)
}

button.close {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none
}

/*按钮*/
.btn {
    display: inline-block;
    box-sizing: border-box;
    cursor: pointer;
    text-align: center;
    font-weight: 400;
    white-space: nowrap;
    vertical-align: middle;
    -moz-padding-start: npx;
    -moz-padding-end: npx;
    border: solid 1px #ddd;
    background-color: #fff;
    width: auto;
    *zoom: 1;
    *overflow: visible;
    -webkit-transition: background-color .1s linear;
    -moz-transition: background-color .1s linear;
    -o-transition: background-color .1s linear;
    transition: background-color .1s linear
}

a.btn:hover, a.btn:focus, a.btn:active, a.btn.active, a.btn.disabled, a.btn[disabled] {
    text-decoration: none
}

.btn:active, .btn.active {
    background-color: #ccc
}

.btn:first-child {
    *margin-left: 0
}

.btn.active, .btn:active {
    -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.125) inset;
    -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.125) inset;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.125) inset
}

/*默认——灰色	通常用于取消*/
.btn-default {
    background-color: #e6e6e6;
    border-color: #e6e6e6
}

.btn-default:hover,
.btn-default:focus,
.btn-default:active,
.btn-default.active {
    color: #333;
    background-color: #c7c7c7;
    border-color: #c7c7c7
}

/*主要——主色	通常用于确定、提交、购买、支付等*/
.btn-primary {
    color: #fff;
    background-color: #5a98de;
    border-color: #5a98de
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    color: #fff;
    background-color: #0a6999;
    border-color: #0a6999
}

/*次要按钮*/
.btn-secondary {
    color: #fff;
    background-color: #3bb4f2;
    border-color: #3bb4f2
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary.active {
    color: #fff;
    background-color: #0f9ae0;
    border-color: #0f9ae0
}

/*成功*/
.btn-success {
    color: #fff;
    background-color: #5eb95e;
    border-color: #5eb95e
}

.btn-success:hover,
.btn-success:focus,
.btn-success:active,
.btn-success.active {
    color: #fff;
    background-color: #429842;
    border-color: #429842
}

/*警告*/
.btn-warning {
    color: #fff;
    background-color: #f37b1d;
    border-color: #f37b1d
}

.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active,
.btn-warning.active {
    color: #fff;
    background-color: #c85e0b;
    border-color: #c85e0b
}

/*危险*/
.btn-danger {
    color: #fff;
    background-color: #dd514c;
    border-color: #dd514c
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active,
.btn-danger.active {
    color: #fff;
    background-color: #c62b26;
    border-color: #c62b26
}

/*链接*/
.btn-link {
    color: #0e90d2;
    cursor: pointer;
    border-color: transparent;
    background-color: transparent
}

.btn-link:hover,
.btn-link:focus,
.btn-link:active,
.btn-link.active {
    color: #095f8a;
    text-decoration: underline;
    background-color: transparent
}

/*块级按钮*/
.btn-block {
    -moz-box-sizing: border-box;
    display: block;
    padding-left: 0;
    padding-right: 0;
    width: 100%
}

/* Outline buttons */
.btn-default-outline {
    background-color: transparent;
    border-color: #e6e6e6
}

.btn-default-outline:hover,
.btn-default-outline:focus,
.btn-default-outline:active,
.btn-default-outline.active {
    color: #333;
    background-color: transparent;
    border-color: #c7c7c7
}

.btn-primary-outline {
    color: #5a98de;
    background-color: transparent;
    border-color: #5a98de
}

.btn-primary-outline:hover,
.btn-primary-outline:focus,
.btn-primary-outline:active,
.btn-primary-outline.active {
    color: #0a6999;
    background-color: transparent;
    border-color: #0a6999
}

.btn-secondary-outline {
    color: #3bb4f2;
    background-color: transparent;
    background-image: none;
    border-color: #3bb4f2
}

.btn-secondary-outline.active, .btn-secondary-outline.focus, .btn-secondary-outline:active, .btn-secondary-outline:focus, .open > .btn-secondary-outline.dropdown-toggle {
    color: #fff;
    background-color: #3bb4f2;
    border-color: #3bb4f2
}

.btn-secondary-outline:hover {
    color: #fff;
    background-color: #3bb4f2;
    border-color: #3bb4f2
}

.btn-secondary-outline.disabled.focus, .btn-secondary-outline.disabled:focus, .btn-secondary-outline:disabled.focus, .btn-secondary-outline:disabled:focus, fieldset[disabled] .btn-secondary-outline.focus, fieldset[disabled] .btn-secondary-outline:focus {
    border-color: #0f9ae0
}

.btn-success-outline {
    color: #5eb95e;
    background-color: transparent;
    background-image: none;
    border-color: #5eb95e
}

.btn-success-outline.active, .btn-success-outline.focus, .btn-success-outline:active, .btn-success-outline:focus, .open > .btn-success-outline.dropdown-toggle {
    color: #fff;
    background-color: #5eb95e;
    border-color: #5eb95e
}

.btn-success-outline:hover {
    color: #fff;
    background-color: #5eb95e;
    border-color: #5eb95e
}

.btn-success-outline.disabled.focus, .btn-success-outline.disabled:focus, .btn-success-outline:disabled.focus, .btn-success-outline:disabled:focus, fieldset[disabled] .btn-success-outline.focus, fieldset[disabled] .btn-success-outline:focus {
    border-color: #429842
}

.btn-warning-outline {
    color: #f37b1d;
    background-color: transparent;
    background-image: none;
    border-color: #f37b1d
}

.btn-warning-outline.active, .btn-warning-outline.focus, .btn-warning-outline:active, .btn-warning-outline:focus, .open > .btn-warning-outline.dropdown-toggle {
    color: #fff;
    background-color: #f37b1d;
    border-color: #f37b1d
}

.btn-warning-outline:hover {
    color: #fff;
    background-color: #f37b1d;
    border-color: #f37b1d
}

.btn-warning-outline.disabled.focus, .btn-warning-outline.disabled:focus, .btn-success-outline:disabled.focus, .btn-warning-outline:disabled:focus, fieldset[disabled] .btn-warning-outline.focus, fieldset[disabled] .btn-warning-outline:focus {
    border-color: #c85e0b
}

.btn-danger-outline {
    color: #dd514c;
    background-color: transparent;
    background-image: none;
    border-color: #dd514c
}

.btn-danger-outline.active, .btn-danger-outline.focus, .btn-danger-outline:active, .btn-danger-outline:focus, .open > .btn-danger-outline.dropdown-toggle {
    color: #fff;
    background-color: #dd514c;
    border-color: #dd514c
}

.btn-danger-outline:hover {
    color: #fff;
    background-color: #dd514c;
    border-color: #dd514c
}

.btn-danger-outline.disabled.focus, .btn-danger-outline.disabled:focus, .btn-success-outline:disabled.focus, .btn-danger-outline:disabled:focus, fieldset[disabled] .btn-danger-outline.focus, fieldset[disabled] .btn-danger-outline:focus {
    border-color: #c62b26
}

/*禁用状态*/
.btn.disabled {
    cursor: not-allowed;
    background-image: none;
    opacity: .65;
    filter: alpha(opacity=65);
    box-shadow: none;
    pointer-events: none
}

/*表单组*/
.form-group {
    display: inline-block;
    vertical-align: middle
}

.form-group .input-text {
    position: relative;
    vertical-align: top
}

.form-group.radius {
    overflow: hidden
}

.form-group.radius .input-text {
    border-radius: 4px 0 0 4px
}

.form-group.round .input-text {
    border-radius: 1000px 0 0 1000px
}

.form-group .btn {
    position: relative;
    margin-left: -1px
}

.form-group.radius .btn {
    border-radius: 0 4px 4px 0
}

.form-group.round .btn {
    border-radius: 0 1000px 1000px 0
}

/*3.6 图片*/
/*3.6.1 图片效果
<img src="" class="img-responsive|radius|round|thumbnail" />
img-responsive 响应式    .radius 圆角图片    .round 圆形图片   .thumbnail 缩略图
*/
.img-responsive {
    display: inline-block;
    max-width: 100%;
    height: auto
}

.thumbnail {
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    max-width: 100%;
    height: auto;
    padding: 4px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out
}

@media (max-width: 767px) {
    .img-responsive {
        width: 100%
    }
}

.duang-opacity img {
    -webkit-transition: opacity .1s linear;
    -moz-transition: opacity .1s linear;
    -o-transition: opacity .1s linear;
    transition: opacity .1s linear
}

.duang-opacity a:hover img, a:hover .opacity img {
    opacity: 0.85;
    filter: alpha(opacity=85)
}

/*3.6.2 图集效果
	Name:			modal_album
	Example:
<div class="album-item" style="width:160px">
	<div class="album-img">
		<img src="" style="height: 160px;">
	</div>
	<div class="album-title">《仙剑奇侠传》赵灵儿<span class="c-999">(20张)</span></div>
	<div class="album-bg">
		<div class="album-bg-Fir"></div>
		<div class="album-bg-Sec"></div>
	</div>
</div>*/
.album-item {
}

.album-img {
    border: 1px solid #e0e0e0
}

.album-img img {
    display: block;
    width: 100%
}

.album-title {
    display: block;
    text-align: left;
    padding: 7px 5px;
    line-height: 18px;
    color: #555;
    text-decoration: none;
    font-size: 12px;
    border: solid 1px #e0e0e0;
    border-top: 0
}

.album-bg-Fir, .album-bg-Sec {
    border: 1px solid #e6e6e6;
    border-top: 1px solid #f5f5f5;
    height: 1px;
    margin: 0 auto;
    overflow: hidden
}

.album-bg-Fir {
    margin: 0 3px
}

.album-bg-Sec {
    margin: 0 6px
}

/*3.6.3 头像
	Name:			mod_avatar
	Example:		<i class="avatar avatar-L radius"><img src="static/h-ui/images/ucenter/avatar-default.jpg"></i>
*/
.avatar {
    display: inline-block;
    position: relative;
    overflow: hidden
}

.avatar img {
    display: block
}

.avatar.radius, .avatar.radius img {
    border-radius: 50%
}

.avatar, .avatar img {
    width: 32px;
    height: 32px
}

.avatar.size-MINI {
    width: 16px;
    height: 16px
}

.avatar.size-S, .avatar.size-S img {
    width: 24px;
    height: 24px
}

.avatar.size-M, .avatar.size-M img {
    width: 32px;
    height: 32px
}

/*默认为中，可以不写，可以理解为：均码*/
.avatar.size-L, .avatar.size-L img {
    width: 48px;
    height: 48px
}

.avatar.size-XL, .avatar.size-XL img {
    width: 64px;
    height: 64px
}

.avatar.size-XXL, .avatar.size-XXL img {
    width: 100px;
    height: 100px
}

.avatar.size-XXXL, .avatar.size-XXXL img {
    width: 128px;
    height: 128px
}

/*3.7 图标
H-ui采用Font Awesome 3.2.1的整套图标，因为是图标字体，所以可以像控制字体那样随心所欲改变这些图标的颜色、大小、阴影以及任何CSS能控制的属性
*/
.iconpic {
    display: inline-block;
    vertical-align: sub;
    *vertical-align: middle;
    _vertical-align: middle;
    width: 16px;
    height: 16px;
    background-position: center;
    background-repeat: no-repeat
}

/*3.8 效果
	Name:			style_animation
	Example:		<input class="btn hui-animation" val="淡入" type="button" data-tra="hui-fadein" />
*/
/* duang 加特效 */
.hui-bounce, .hui-flip, .hui-flash, .hui-shake, .hui-swing, .hui-wobble, .hui-ring {
    -webkit-animation: 1s ease;
    -moz-animation: 1s ease;
    -ms-animation: 1s ease;
    animation: 1s ease
}

.hui-fadein, .hui-fadeinT, .hui-fadeinR, .hui-fadeinB, .hui-fadeinL, .hui-bouncein, .hui-bounceinT, .hui-bounceinR, .hui-bounceinB, .hui-bounceinL, .hui-rotatein, .hui-rotateinLT, .hui-rotateinLB, .hui-rotateinRT, .hui-rotateinRB, .hui-flipin, .hui-flipinX, .hui-flipinY {
    -webkit-animation: 1s ease-out backwards;
    -moz-animation: 1s ease-out backwards;
    -ms-animation: 1s ease-out backwards;
    animation: 1s ease-out backwards
}

.hui-fadeout, .hui-fadeoutT, .hui-fadeoutR, .hui-fadeoutB, .hui-fadeoutL, .hui-bounceout, .hui-bounceoutT, .hui-bounceoutR, .hui-bounceoutB, .hui-bounceoutL, .hui-rotateout, .hui-rotateoutLT, .hui-rotateoutLB, .hui-rotateoutRT, .hui-rotateoutRB, .hui-flipout, .hui-flipoutX, .hui-flipoutY {
    -webkit-animation: 1s ease-in forwards;
    -moz-animation: 1s ease-in forwards;
    -ms-animation: 1s ease-in forwards;
    animation: 1s ease-in forwards
}

/* 淡入 */
.hui-fadein {
    -webkit-animation-name: fadein;
    -moz-animation-name: fadein;
    -ms-animation-name: fadein;
    animation-name: fadein
}

/* 淡入-从上 */
.hui-fadeinT {
    -webkit-animation-name: fadeinT;
    -moz-animation-name: fadeinT;
    -ms-animation-name: fadeinT;
    animation-name: fadeinT
}

/* 淡入-从右 */
.hui-fadeinR {
    -webkit-animation-name: fadeinR;
    -moz-animation-name: fadeinR;
    -ms-animation-name: fadeinR;
    animation-name: fadeinR
}

/* 淡入-从下 */
.hui-fadeinB {
    -webkit-animation-name: fadeinB;
    -moz-animation-name: fadeinB;
    -ms-animation-name: fadeinB;
    animation-name: fadeinB
}

/* 淡入-从左 */
.hui-fadeinL {
    -webkit-animation-name: fadeinL;
    -moz-animation-name: fadeinL;
    -ms-animation-name: fadeinL;
    animation-name: fadeinL
}

/* 淡出 */
.hui-fadeout {
    -webkit-animation-name: fadeout;
    -moz-animation-name: fadeout;
    -ms-animation-name: fadeout;
    animation-name: fadeout
}

/* 淡出-向上 */
.hui-fadeoutT {
    -webkit-animation-name: fadeoutT;
    -moz-animation-name: fadeoutT;
    -ms-animation-name: fadeoutT;
    animation-name: fadeoutT
}

/* 淡出-向右 */
.hui-fadeoutR {
    -webkit-animation-name: fadeoutR;
    -moz-animation-name: fadeoutR;
    -ms-animation-name: fadeoutR;
    animation-name: fadeoutR
}

/* 淡出-向下 */
.hui-fadeoutB {
    -webkit-animation-name: fadeoutB;
    -moz-animation-name: fadeoutB;
    -ms-animation-name: fadeoutB;
    animation-name: fadeoutB
}

/* 淡出-向左 */
.hui-fadeoutL {
    -webkit-animation-name: fadeoutL;
    -moz-animation-name: fadeoutL;
    -ms-animation-name: fadeoutL;
    animation-name: fadeoutL
}

/* 弹跳 */
.hui-bounce {
    -webkit-animation-name: bounce;
    -moz-animation-name: bounce;
    -ms-animation-name: bounce;
    animation-name: bounce
}

/* 弹入 */
.hui-bouncein {
    -webkit-animation-name: bouncein;
    -moz-animation-name: bouncein;
    -ms-animation-name: bouncein;
    animation-name: bouncein
}

/* 弹入-从上 */
.hui-bounceinT {
    -webkit-animation-name: bounceinT;
    -moz-animation-name: bounceinT;
    -ms-animation-name: bounceinT;
    animation-name: bounceinT
}

/* 弹入-从右 */
.hui-bounceinR {
    -webkit-animation-name: bounceinR;
    -moz-animation-name: bounceinR;
    -ms-animation-name: bounceinR;
    animation-name: bounceinR
}

/* 弹入-从下 */
.hui-bounceinB {
    -webkit-animation-name: bounceinB;
    -moz-animation-name: bounceinB;
    -ms-animation-name: bounceinB;
    animation-name: bounceinB
}

/* 弹入-从左 */
.hui-bounceinL {
    -webkit-animation-name: bounceinL;
    -moz-animation-name: bounceinL;
    -ms-animation-name: bounceinL;
    animation-name: bounceinL
}

/* 弹出 */
.hui-bounceout {
    -webkit-animation-name: bounceout;
    -moz-animation-name: bounceout;
    -ms-animation-name: bounceout;
    animation-name: bounceout
}

/* 弹出-向上 */
.hui-bounceoutT {
    -webkit-animation-name: bounceoutT;
    -moz-animation-name: bounceoutT;
    -ms-animation-name: bounceoutT;
    animation-name: bounceoutT
}

/* 弹出-向右 */
.hui-bounceoutR {
    -webkit-animation-name: bounceoutR;
    -moz-animation-name: bounceoutR;
    -ms-animation-name: bounceoutR;
    animation-name: bounceoutR
}

/* 弹出-向下 */
.hui-bounceoutB {
    -webkit-animation-name: bounceoutB;
    -moz-animation-name: bounceoutB;
    -ms-animation-name: bounceoutB;
    animation-name: bounceoutB
}

/* 弹出-向左 */
.hui-bounceoutL {
    -webkit-animation-name: bounceoutL;
    -moz-animation-name: bounceoutL;
    -ms-animation-name: bounceoutL;
    animation-name: bounceoutL
}

/* 转入 */
.hui-rotatein {
    -webkit-animation-name: rotatein;
    -moz-animation-name: rotatein;
    -ms-animation-name: rotatein;
    animation-name: rotatein
}

/* 转入-从左上 */
.hui-rotateinLT {
    -webkit-animation-name: rotateinLT;
    -moz-animation-name: rotateinLT;
    -ms-animation-name: rotateinLT;
    animation-name: rotateinLT
}

/* 转入-从左下 */
.hui-rotateinLB {
    -webkit-animation-name: rotateinLB;
    -moz-animation-name: rotateinLB;
    -ms-animation-name: rotateinLB;
    animation-name: rotateinLB
}

/* 转入-从右上 */
.hui-rotateinRT {
    -webkit-animation-name: rotateinRT;
    -moz-animation-name: rotateinRT;
    -ms-animation-name: rotateinRT;
    animation-name: rotateinRT
}

/* 转入-从右下*/
.hui-rotateinRB {
    -webkit-animation-name: rotateinRB;
    -moz-animation-name: rotateinRB;
    -ms-animation-name: rotateinRB;
    animation-name: rotateinRB
}

/* 转出 */
.hui-rotateout {
    -webkit-animation-name: rotateout;
    -moz-animation-name: rotateout;
    -ms-animation-name: rotateout;
    animation-name: rotateout
}

/* 转出-向左上 */
.hui-rotateoutLT {
    -webkit-animation-name: rotateoutLT;
    -moz-animation-name: rotateoutLT;
    -ms-animation-name: rotateoutLT;
    animation-name: rotateoutLT
}

/* 转出-向左下 */
.hui-rotateoutLB {
    -webkit-animation-name: rotateoutLB;
    -moz-animation-name: rotateoutLB;
    -ms-animation-name: rotateoutLB;
    animation-name: rotateoutLB
}

/* 转出-向右上 */
.hui-rotateoutRT {
    -webkit-animation-name: rotateoutRT;
    -moz-animation-name: rotateoutRT;
    -ms-animation-name: rotateoutRT;
    animation-name: rotateoutRT
}

/* 转出-向右下 */
.hui-rotateoutRB {
    -webkit-animation-name: rotateoutRB;
    -moz-animation-name: rotateoutRB;
    -ms-animation-name: rotateoutRB;
    animation-name: rotateoutRB
}

/* 翻转 */
.hui-flip {
    -webkit-animation-name: flip;
    -moz-animation-name: flip;
    -ms-animation-name: flip;
    animation-name: flip
}

/* 翻入-X轴 */
.hui-flipinX {
    -webkit-animation-name: flipinX;
    -moz-animation-name: flipinX;
    -ms-animation-name: flipinX;
    animation-name: flipinX
}

/* 翻入-Y轴 */
.hui-flipin, .hui-flipinY {
    -webkit-animation-name: flipinY;
    -moz-animation-name: flipinY;
    -ms-animation-name: flipinY;
    animation-name: flipinY
}

/* 翻出-X轴 */
.hui-flipoutX {
    -webkit-animation-name: flipoutX;
    -moz-animation-name: flipoutX;
    -ms-animation-name: flipoutX;
    animation-name: flipoutX
}

/* 翻出-Y轴 */
.hui-flipout, .hui-flipoutY {
    -webkit-animation-name: flipoutY;
    -moz-animation-name: flipoutY;
    -ms-animation-name: flipoutY;
    animation-name: flipoutY
}

/* 闪烁 */
.hui-flash {
    -webkit-animation-name: flash;
    -moz-animation-name: flash;
    -ms-animation-name: flash;
    animation-name: flash
}

/* 震颤 */
.hui-shake {
    -webkit-animation-name: shake;
    -moz-animation-name: shake;
    -ms-animation-name: shake;
    animation-name: shake
}

/* 摇摆 */
.hui-swing {
    -webkit-animation-name: swing;
    -moz-animation-name: swing;
    -ms-animation-name: swing;
    animation-name: swing
}

/* 摇晃 */
.hui-wobble {
    -webkit-animation-name: wobble;
    -moz-animation-name: wobble;
    -ms-animation-name: wobble;
    animation-name: wobble
}

/* 震铃 */
.hui-ring {
    -webkit-animation-name: ring;
    -moz-animation-name: ring;
    -ms-animation-name: ring;
    animation-name: ring
}

/* define */
/* 淡入 */
@-webkit-keyframes fadein {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@-moz-keyframes fadein {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@-ms-keyframes fadein {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

@keyframes fadein {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

/* 淡入-从上 */
@-webkit-keyframes fadeinT {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
}

@-moz-keyframes fadeinT {
    0% {
        opacity: 0;
        -moz-transform: translateY(-100px)
    }
    100% {
        opacity: 1;
        -moz-transform: translateY(0)
    }
}

@-ms-keyframes fadeinT {
    0% {
        opacity: 0;
        -ms-transform: translateY(-100px)
    }
    100% {
        opacity: 1;
        -ms-transform: translateY(0)
    }
}

@keyframes fadeinT {
    0% {
        opacity: 0;
        transform: translateY(-100px)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

/* 淡入-从右 */
@-webkit-keyframes fadeinR {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
}

@-moz-keyframes fadeinR {
    0% {
        opacity: 0;
        -moz-transform: translateX(100px)
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0)
    }
}

@-ms-keyframes fadeinR {
    0% {
        opacity: 0;
        -ms-transform: translateX(100px)
    }
    100% {
        opacity: 1;
        -ms-transform: translateX(0)
    }
}

@keyframes fadeinR {
    0% {
        opacity: 0;
        transform: translateX(100px)
    }
    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

/* 淡入-从下 */
@-webkit-keyframes fadeinB {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
}

@-moz-keyframes fadeinB {
    0% {
        opacity: 0;
        -moz-transform: translateY(100px)
    }
    100% {
        opacity: 1;
        -moz-transform: translateY(0)
    }
}

@-ms-keyframes fadeinB {
    0% {
        opacity: 0;
        -ms-transform: translateY(100px)
    }
    100% {
        opacity: 1;
        -ms-transform: translateY(0)
    }
}

@keyframes fadeinB {
    0% {
        opacity: 0;
        transform: translateY(100px)
    }
    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

/* 淡入-从左 */
@-webkit-keyframes fadeinL {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
}

@-moz-keyframes fadeinL {
    0% {
        opacity: 0;
        -moz-transform: translateX(-100px)
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0)
    }
}

@-ms-keyframes fadeinL {
    0% {
        opacity: 0;
        -ms-transform: translateX(-100px)
    }
    100% {
        opacity: 1;
        -ms-transform: translateX(0)
    }
}

@keyframes fadeinL {
    0% {
        opacity: 0;
        transform: translateX(-100px)
    }
    100% {
        opacity: 1;
        transform: translateX(0)
    }
}

/* 淡出 */
@-webkit-keyframes fadeout {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@-moz-keyframes fadeout {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@-ms-keyframes fadeout {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

@keyframes fadeout {
    0% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

/* 淡出-向上 */
@-webkit-keyframes fadeoutT {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-100px)
    }
}

@-moz-keyframes fadeoutT {
    0% {
        opacity: 1;
        -moz-transform: translateY(0)
    }
    100% {
        opacity: 0;
        -moz-transform: translateY(-100px)
    }
}

@-ms-keyframes fadeoutT {
    0% {
        opacity: 1;
        -ms-transform: translateY(0)
    }
    100% {
        opacity: 0;
        -ms-transform: translateY(-100px)
    }
}

@keyframes fadeoutT {
    0% {
        opacity: 1;
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        transform: translateY(-100px)
    }
}

/* 淡出-向右 */
@-webkit-keyframes fadeoutR {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(100px)
    }
}

@-moz-keyframes fadeoutR {
    0% {
        opacity: 1;
        -moz-transform: translateX(0)
    }
    100% {
        opacity: 0;
        -moz-transform: translateX(100px)
    }
}

@-ms-keyframes fadeoutR {
    0% {
        opacity: 1;
        -ms-transform: translateX(0)
    }
    100% {
        opacity: 0;
        -ms-transform: translateX(100px)
    }
}

@keyframes fadeoutR {
    0% {
        opacity: 1;
        transform: translateX(0)
    }
    100% {
        opacity: 0;
        transform: translateX(100px)
    }
}

/* 淡出-向下 */
@-webkit-keyframes fadeoutB {
    0% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(100px)
    }
}

@-moz-keyframes fadeoutB {
    0% {
        opacity: 1;
        -moz-transform: translateY(0)
    }
    100% {
        opacity: 0;
        -moz-transform: translateY(100px)
    }
}

@-ms-keyframes fadeoutB {
    0% {
        opacity: 1;
        -ms-transform: translateY(0)
    }
    100% {
        opacity: 0;
        -ms-transform: translateY(100px)
    }
}

@keyframes fadeoutB {
    0% {
        opacity: 1;
        transform: translateY(0)
    }
    100% {
        opacity: 0;
        transform: translateY(100px)
    }
}

/* 淡出-向左 */
@-webkit-keyframes fadeoutL {
    0% {
        opacity: 1;
        -webkit-transform: translateX(0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-100px)
    }
}

@-moz-keyframes fadeoutL {
    0% {
        opacity: 1;
        -moz-transform: translateX(0)
    }
    100% {
        opacity: 0;
        -moz-transform: translateX(-100px)
    }
}

@-ms-keyframes fadeoutL {
    0% {
        opacity: 1;
        -ms-transform: translateX(0)
    }
    100% {
        opacity: 0;
        -ms-transform: translateX(-100px)
    }
}

@keyframes fadeoutL {
    0% {
        opacity: 1;
        transform: translateX(0)
    }
    100% {
        opacity: 0;
        transform: translateX(-100px)
    }
}

/* 弹跳 */
@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0)
    }
    40% {
        -webkit-transform: translateY(-30px)
    }
    60% {
        -webkit-transform: translateY(-15px)
    }
}

@-moz-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -moz-transform: translateY(0)
    }
    40% {
        -moz-transform: translateY(-30px)
    }
    60% {
        -moz-transform: translateY(-15px)
    }
}

@-ms-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -ms-transform: translateY(0)
    }
    40% {
        -ms-transform: translateY(-30px)
    }
    60% {
        -ms-transform: translateY(-15px)
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0)
    }
    40% {
        transform: translateY(-30px)
    }
    60% {
        transform: translateY(-15px)
    }
}

/* 弹入 */
@-webkit-keyframes bouncein {
    0% {
        opacity: 0;
        -webkit-transform: scale(0.3)
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.05)
    }
    70% {
        -webkit-transform: scale(0.9)
    }
    100% {
        -webkit-transform: scale(1)
    }
}

@-moz-keyframes bouncein {
    0% {
        opacity: 0;
        -moz-transform: scale(0.3)
    }
    50% {
        opacity: 1;
        -moz-transform: scale(1.05)
    }
    70% {
        -moz-transform: scale(0.9)
    }
    100% {
        -moz-transform: scale(1)
    }
}

@-ms-keyframes bouncein {
    0% {
        opacity: 0;
        -ms-transform: scale(0.3)
    }
    50% {
        opacity: 1;
        -ms-transform: scale(1.05)
    }
    70% {
        -ms-transform: scale(0.9)
    }
    100% {
        -ms-transform: scale(1)
    }
}

@keyframes bouncein {
    0% {
        opacity: 0;
        transform: scale(0.3)
    }
    50% {
        opacity: 1;
        transform: scale(1.05)
    }
    70% {
        transform: scale(0.9)
    }
    100% {
        transform: scale(1)
    }
}

/* 弹入-从上 */
@-webkit-keyframes bounceinT {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-100px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(30px)
    }
    80% {
        -webkit-transform: translateY(-10px)
    }
    100% {
        -webkit-transform: translateY(0)
    }
}

@-moz-keyframes bounceinT {
    0% {
        opacity: 0;
        -moz-transform: translateY(-100px)
    }
    60% {
        opacity: 1;
        -moz-transform: translateY(30px)
    }
    80% {
        -moz-transform: translateY(-10px)
    }
    100% {
        -moz-transform: translateY(0)
    }
}

@-ms-keyframes bounceinT {
    0% {
        opacity: 0;
        -ms-transform: translateY(-100px)
    }
    60% {
        opacity: 1;
        -ms-transform: translateY(30px)
    }
    80% {
        -ms-transform: translateY(-10px)
    }
    100% {
        -ms-transform: translateY(0)
    }
}

@keyframes bounceinT {
    0% {
        opacity: 0;
        transform: translateY(-100px)
    }
    60% {
        opacity: 1;
        transform: translateY(30px)
    }
    80% {
        transform: translateY(-10px)
    }
    100% {
        transform: translateY(0)
    }
}

/* 弹入-从右 */
@-webkit-keyframes bounceinR {
    0% {
        opacity: 0;
        -webkit-transform: translateX(100px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(-30px)
    }
    80% {
        -webkit-transform: translateX(10px)
    }
    100% {
        -webkit-transform: translateX(0)
    }
}

@-moz-keyframes bounceinR {
    0% {
        opacity: 0;
        -moz-transform: translateX(100px)
    }
    60% {
        opacity: 1;
        -moz-transform: translateX(-30px)
    }
    80% {
        -moz-transform: translateX(10px)
    }
    100% {
        -moz-transform: translateX(0)
    }
}

@-ms-keyframes bounceinR {
    0% {
        opacity: 0;
        -ms-transform: translateX(100px)
    }
    60% {
        opacity: 1;
        -ms-transform: translateX(-30px)
    }
    80% {
        -ms-transform: translateX(10px)
    }
    100% {
        -ms-transform: translateX(0)
    }
}

@keyframes bounceinR {
    0% {
        opacity: 0;
        transform: translateX(100px)
    }
    60% {
        opacity: 1;
        transform: translateX(-30px)
    }
    80% {
        transform: translateX(10px)
    }
    100% {
        transform: translateX(0)
    }
}

/* 弹入-从下 */
@-webkit-keyframes bounceinB {
    0% {
        opacity: 0;
        -webkit-transform: translateY(100px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(-30px)
    }
    80% {
        -webkit-transform: translateY(10px)
    }
    100% {
        -webkit-transform: translateY(0)
    }
}

@-moz-keyframes bounceinB {
    0% {
        opacity: 0;
        -moz-transform: translateY(100px)
    }
    60% {
        opacity: 1;
        -moz-transform: translateY(-30px)
    }
    80% {
        -moz-transform: translateY(10px)
    }
    100% {
        -moz-transform: translateY(0)
    }
}

@-ms-keyframes bounceinB {
    0% {
        opacity: 0;
        -ms-transform: translateY(100px)
    }
    60% {
        opacity: 1;
        -ms-transform: translateY(-30px)
    }
    80% {
        -ms-transform: translateY(10px)
    }
    100% {
        -ms-transform: translateY(0)
    }
}

@keyframes bounceinB {
    0% {
        opacity: 0;
        transform: translateY(100px)
    }
    60% {
        opacity: 1;
        transform: translateY(-30px)
    }
    80% {
        transform: translateY(10px)
    }
    100% {
        transform: translateY(0)
    }
}

/* 弹入-从左 */
@-webkit-keyframes bounceinL {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateX(30px)
    }
    80% {
        -webkit-transform: translateX(-10px)
    }
    100% {
        -webkit-transform: translateX(0)
    }
}

@-moz-keyframes bounceinL {
    0% {
        opacity: 0;
        -moz-transform: translateX(-100px)
    }
    60% {
        opacity: 1;
        -moz-transform: translateX(30px)
    }
    80% {
        -moz-transform: translateX(-10px)
    }
    100% {
        -moz-transform: translateX(0)
    }
}

@-ms-keyframes bounceinL {
    0% {
        opacity: 0;
        -ms-transform: translateX(-100px)
    }
    60% {
        opacity: 1;
        -ms-transform: translateX(30px)
    }
    80% {
        -ms-transform: translateX(-10px)
    }
    100% {
        -ms-transform: translateX(0)
    }
}

@keyframes bounceinL {
    0% {
        opacity: 0;
        transform: translateX(-100px)
    }
    60% {
        opacity: 1;
        transform: translateX(30px)
    }
    80% {
        transform: translateX(-10px)
    }
    100% {
        transform: translateX(0)
    }
}

/* 弹出 */
@-webkit-keyframes bounceout {
    0% {
        -webkit-transform: scale(1)
    }
    25% {
        -webkit-transform: scale(0.95)
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1.1)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(0.3)
    }
}

@-moz-keyframes bounceout {
    0% {
        -moz-transform: scale(1)
    }
    25% {
        -moz-transform: scale(0.95)
    }
    50% {
        opacity: 1;
        -moz-transform: scale(1.1)
    }
    100% {
        opacity: 0;
        -moz-transform: scale(0.3)
    }
}

@-ms-keyframes bounceout {
    0% {
        -ms-transform: scale(1)
    }
    25% {
        -ms-transform: scale(0.95)
    }
    50% {
        opacity: 1;
        -ms-transform: scale(1.1)
    }
    100% {
        opacity: 0;
        -ms-transform: scale(0.3)
    }
}

@keyframes bounceout {
    0% {
        transform: scale(1)
    }
    25% {
        transform: scale(0.95)
    }
    50% {
        opacity: 1;
        transform: scale(1.1)
    }
    100% {
        opacity: 0;
        transform: scale(0.3)
    }
}

/* 弹出-向上*/
@-webkit-keyframes bounceoutT {
    0% {
        -webkit-transform: translateY(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateY(20px)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(-100px)
    }
}

@-moz-keyframes bounceoutT {
    0% {
        -moz-transform: translateY(0)
    }
    20% {
        opacity: 1;
        -moz-transform: translateY(20px)
    }
    100% {
        opacity: 0;
        -moz-transform: translateY(-100px)
    }
}

@-ms-keyframes bounceoutT {
    0% {
        -ms-transform: translateY(0)
    }
    20% {
        opacity: 1;
        -ms-transform: translateY(20px)
    }
    100% {
        opacity: 0;
        -ms-transform: translateY(-100px)
    }
}

@keyframes bounceoutT {
    0% {
        transform: translateY(0)
    }
    20% {
        opacity: 1;
        transform: translateY(20px)
    }
    100% {
        opacity: 0;
        transform: translateY(-100px)
    }
}

/* 弹出-向右*/
@-webkit-keyframes bounceoutR {
    0% {
        -webkit-transform: translateX(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(-20px)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(100px)
    }
}

@-moz-keyframes bounceoutR {
    0% {
        -moz-transform: translateX(0)
    }
    20% {
        opacity: 1;
        -moz-transform: translateX(-20px)
    }
    100% {
        opacity: 0;
        -moz-transform: translateX(100px)
    }
}

@-ms-keyframes bounceoutR {
    0% {
        -ms-transform: translateX(0)
    }
    20% {
        opacity: 1;
        -ms-transform: translateX(-20px)
    }
    100% {
        opacity: 0;
        -ms-transform: translateX(100px)
    }
}

@keyframes bounceoutR {
    0% {
        transform: translateX(0)
    }
    20% {
        opacity: 1;
        transform: translateX(-20px)
    }
    100% {
        opacity: 0;
        transform: translateX(100px)
    }
}

/* 弹出-向下 */
@-webkit-keyframes bounceoutB {
    0% {
        -webkit-transform: translateY(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateY(-20px)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateY(100px)
    }
}

@-moz-keyframes bounceoutB {
    0% {
        -moz-transform: translateY(0)
    }
    20% {
        opacity: 1;
        -moz-transform: translateY(-20px)
    }
    100% {
        opacity: 0;
        -moz-transform: translateY(100px)
    }
}

@-ms-keyframes bounceoutB {
    0% {
        -ms-transform: translateY(0)
    }
    20% {
        opacity: 1;
        -ms-transform: translateY(-20px)
    }
    100% {
        opacity: 0;
        -ms-transform: translateY(100px)
    }
}

@keyframes bounceoutB {
    0% {
        transform: translateY(0)
    }
    20% {
        opacity: 1;
        transform: translateY(-20px)
    }
    100% {
        opacity: 0;
        transform: translateY(100px)
    }
}

/* 弹出-向左 */
@-webkit-keyframes bounceoutL {
    0% {
        -webkit-transform: translateX(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateX(20px)
    }
    100% {
        opacity: 0;
        -webkit-transform: translateX(-100px)
    }
}

@-moz-keyframes bounceoutL {
    0% {
        -moz-transform: translateX(0)
    }
    20% {
        opacity: 1;
        -moz-transform: translateX(20px)
    }
    100% {
        opacity: 0;
        -moz-transform: translateX(-100px)
    }
}

@-ms-keyframes bounceoutL {
    0% {
        -ms-transform: translateX(0)
    }
    20% {
        opacity: 1;
        -ms-transform: translateX(20px)
    }
    100% {
        opacity: 0;
        -ms-transform: translateX(-100px)
    }
}

@keyframes bounceoutL {
    0% {
        transform: translateX(0)
    }
    20% {
        opacity: 1;
        transform: translateX(20px)
    }
    100% {
        opacity: 0;
        transform: translateX(-200px)
    }
}

/* 转入 */
@-webkit-keyframes rotatein {
    0% {
        opacity: 0;
        -webkit-transform: rotate(-200deg)
    }
    100% {
        opacity: 1;
        -webkit-transform: rotate(0)
    }
}

@-moz-keyframes rotatein {
    0% {
        opacity: 0;
        -moz-transform: rotate(-200deg)
    }
    100% {
        opacity: 1;
        -moz-transform: rotate(0)
    }
}

@-ms-keyframes rotatein {
    0% {
        opacity: 0;
        -ms-transform: rotate(-200deg)
    }
    100% {
        opacity: 1;
        -ms-transform: rotate(0)
    }
}

@keyframes rotatein {
    0% {
        opacity: 0;
        transform: rotate(-200deg)
    }
    100% {
        opacity: 1;
        transform: rotate(0)
    }
}

/* 转入-从左上 */
@-webkit-keyframes rotateinLT {
    0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(-90deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1
    }
}

@-moz-keyframes rotateinLT {
    0% {
        -moz-transform-origin: left bottom;
        -moz-transform: rotate(-90deg);
        opacity: 0
    }
    100% {
        -moz-transform-origin: left bottom;
        -moz-transform: rotate(0);
        opacity: 1
    }
}

@-ms-keyframes rotateinLT {
    0% {
        -ms-transform-origin: left bottom;
        -ms-transform: rotate(-90deg);
        opacity: 0
    }
    100% {
        -ms-transform-origin: left bottom;
        -ms-transform: rotate(0);
        opacity: 1
    }
}

@keyframes rotateinLT {
    0% {
        transform-origin: left bottom;
        transform: rotate(-90deg);
        opacity: 0
    }
    100% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1
    }
}

/* 转入-从左下 */
@-webkit-keyframes rotateineftB {
    0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(90deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1
    }
}

@-moz-keyframes rotateineftB {
    0% {
        -moz-transform-origin: left bottom;
        -moz-transform: rotate(90deg);
        opacity: 0
    }
    100% {
        -moz-transform-origin: left bottom;
        -moz-transform: rotate(0);
        opacity: 1
    }
}

@-ms-keyframes rotateineftB {
    0% {
        -ms-transform-origin: left bottom;
        -ms-transform: rotate(90deg);
        opacity: 0
    }
    100% {
        -ms-transform-origin: left bottom;
        -ms-transform: rotate(0);
        opacity: 1
    }
}

@keyframes rotateineftB {
    0% {
        transform-origin: left bottom;
        transform: rotate(90deg);
        opacity: 0
    }
    100% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1
    }
}

/* 转入-从右上 */
@-webkit-keyframes rotateinRT {
    0% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(90deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(0);
        opacity: 1
    }
}

@-moz-keyframes rotateinRT {
    0% {
        -moz-transform-origin: right bottom;
        -moz-transform: rotate(90deg);
        opacity: 0
    }
    100% {
        -moz-transform-origin: right bottom;
        -moz-transform: rotate(0);
        opacity: 1
    }
}

@-ms-keyframes rotateinRT {
    0% {
        -ms-transform-origin: right bottom;
        -ms-transform: rotate(90deg);
        opacity: 0
    }
    100% {
        -ms-transform-origin: right bottom;
        -ms-transform: rotate(0);
        opacity: 1
    }
}

@keyframes rotateinRT {
    0% {
        transform-origin: right bottom;
        transform: rotate(90deg);
        opacity: 0
    }
    100% {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1
    }
}

/* 转入-从右下*/
@-webkit-keyframes rotateinRB {
    0% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(-90deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(0);
        opacity: 1
    }
}

@-moz-keyframes rotateinRB {
    0% {
        -moz-transform-origin: right bottom;
        -moz-transform: rotate(-90deg);
        opacity: 0
    }
    100% {
        -moz-transform-origin: right bottom;
        -moz-transform: rotate(0);
        opacity: 1
    }
}

@-ms-keyframes rotateinRB {
    0% {
        -ms-transform-origin: right bottom;
        -ms-transform: rotate(-90deg);
        opacity: 0
    }
    100% {
        -ms-transform-origin: right bottom;
        -ms-transform: rotate(0);
        opacity: 1
    }
}

@keyframes rotateinRB {
    0% {
        transform-origin: right bottom;
        transform: rotate(-90deg);
        opacity: 0
    }
    100% {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1
    }
}

/* 转出 */
@-webkit-keyframes rotateout {
    0% {
        -webkit-transform-origin: center center;
        -webkit-transform: rotate(0);
        opacity: 1
    }
    100% {
        -webkit-transform-origin: center center;
        -webkit-transform: rotate(200deg);
        opacity: 0
    }
}

@-moz-keyframes rotateout {
    0% {
        -moz-transform-origin: center center;
        -moz-transform: rotate(0);
        opacity: 1
    }
    100% {
        -moz-transform-origin: center center;
        -moz-transform: rotate(200deg);
        opacity: 0
    }
}

@-ms-keyframes rotateout {
    0% {
        -ms-transform-origin: center center;
        -ms-transform: rotate(0);
        opacity: 1
    }
    100% {
        -ms-transform-origin: center center;
        -ms-transform: rotate(200deg);
        opacity: 0
    }
}

@keyframes rotateout {
    0% {
        transform-origin: center center;
        transform: rotate(0);
        opacity: 1
    }
    100% {
        transform-origin: center center;
        transform: rotate(200deg);
        opacity: 0
    }
}

/* 转出-向左上 */
@-webkit-keyframes rotateoutLT {
    0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1
    }
    100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(-90deg);
        opacity: 0
    }
}

@-moz-keyframes rotateoutLT {
    0% {
        -moz-transform-origin: left bottom;
        -moz-transform: rotate(0);
        opacity: 1
    }
    100% {
        -moz-transform-origin: left bottom;
        -moz-transform: rotate(-90deg);
        opacity: 0
    }
}

@-ms-keyframes rotateoutLT {
    0% {
        -ms-transform-origin: left bottom;
        -ms-transform: rotate(0);
        opacity: 1
    }
    100% {
        -ms-transform-origin: left bottom;
        -ms-transform: rotate(-90deg);
        opacity: 0
    }
}

@keyframes rotateoutLT {
    0% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1
    }
    100% {
        transform-origin: left bottom;
        transform: rotate(-90deg);
        opacity: 0
    }
}

/* 转出-向左下 */
@-webkit-keyframes rotateoutLB {
    0% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(0);
        opacity: 1
    }
    100% {
        -webkit-transform-origin: left bottom;
        -webkit-transform: rotate(90deg);
        opacity: 0
    }
}

@-moz-keyframes rotateoutLB {
    0% {
        -moz-transform-origin: left bottom;
        -moz-transform: rotate(0);
        opacity: 1
    }
    100% {
        -moz-transform-origin: left bottom;
        -moz-transform: rotate(90deg);
        opacity: 0
    }
}

@-ms-keyframes rotateoutLB {
    0% {
        -ms-transform-origin: left bottom;
        -ms-transform: rotate(0);
        opacity: 1
    }
    100% {
        -ms-transform-origin: left bottom;
        -ms-transform: rotate(90deg);
        opacity: 0
    }
}

@keyframes rotateoutLB {
    0% {
        transform-origin: left bottom;
        transform: rotate(0);
        opacity: 1
    }
    100% {
        transform-origin: left bottom;
        transform: rotate(90deg);
        opacity: 0
    }
}

/* 转出-向右上 */
@-webkit-keyframes rotateoutRT {
    0% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(0);
        opacity: 1
    }
    100% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(90deg);
        opacity: 0
    }
}

@-moz-keyframes rotateoutRT {
    0% {
        -moz-transform-origin: right bottom;
        -moz-transform: rotate(0);
        opacity: 1
    }
    100% {
        -moz-transform-origin: right bottom;
        -moz-transform: rotate(90deg);
        opacity: 0
    }
}

@-ms-keyframes rotateoutRT {
    0% {
        -ms-transform-origin: right bottom;
        -ms-transform: rotate(0);
        opacity: 1
    }
    100% {
        -ms-transform-origin: right bottom;
        -ms-transform: rotate(90deg);
        opacity: 0
    }
}

@keyframes rotateoutRT {
    0% {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1
    }
    100% {
        transform-origin: right bottom;
        transform: rotate(90deg);
        opacity: 0
    }
}

/* 转出-向右下 */
@-webkit-keyframes rotateoutBR {
    0% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(0);
        opacity: 1
    }
    100% {
        -webkit-transform-origin: right bottom;
        -webkit-transform: rotate(-90deg);
        opacity: 0
    }
}

@-moz-keyframes rotateoutBR {
    0% {
        -moz-transform-origin: right bottom;
        -moz-transform: rotate(0);
        opacity: 1
    }
    100% {
        -moz-transform-origin: right bottom;
        -moz-transform: rotate(-90deg);
        opacity: 0
    }
}

@-ms-keyframes rotateoutBR {
    0% {
        -ms-transform-origin: right bottom;
        -ms-transform: rotate(0);
        opacity: 1
    }
    100% {
        -ms-transform-origin: right bottom;
        -ms-transform: rotate(-90deg);
        opacity: 0
    }
}

@keyframes rotateoutBR {
    0% {
        transform-origin: right bottom;
        transform: rotate(0);
        opacity: 1
    }
    100% {
        transform-origin: right bottom;
        transform: rotate(-90deg);
        opacity: 0
    }
}

/* 翻转 */
@-webkit-keyframes flip {
    0% {
        -webkit-transform: perspective(400px) rotateY(0);
        -webkit-animation-timing-function: ease-out
    }
    40% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg);
        -webkit-animation-timing-function: ease-out
    }
    50% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        -webkit-animation-timing-function: ease-in
    }
    80% {
        -webkit-transform: perspective(400px) rotateY(360deg) scale(0.95);
        -webkit-animation-timing-function: ease-in
    }
    100% {
        -webkit-transform: perspective(400px) scale(1);
        -webkit-animation-timing-function: ease-in
    }
}

@-moz-keyframes flip {
    0% {
        -moz-transform: perspective(400px) rotateY(0);
        -moz-animation-timing-function: ease-out
    }
    40% {
        -moz-transform: perspective(400px) translateZ(150px) rotateY(170deg);
        -moz-animation-timing-function: ease-out
    }
    50% {
        -moz-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        -moz-animation-timing-function: ease-in
    }
    80% {
        -moz-transform: perspective(400px) rotateY(360deg) scale(0.95);
        -moz-animation-timing-function: ease-in
    }
    100% {
        -moz-transform: perspective(400px) scale(1);
        -moz-animation-timing-function: ease-in
    }
}

@-ms-keyframes flip {
    0% {
        -ms-transform: perspective(400px) rotateY(0);
        -ms-animation-timing-function: ease-out
    }
    40% {
        -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg);
        -ms-animation-timing-function: ease-out
    }
    50% {
        -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        -ms-animation-timing-function: ease-in
    }
    80% {
        -ms-transform: perspective(400px) rotateY(360deg) scale(0.95);
        -ms-animation-timing-function: ease-in
    }
    100% {
        -ms-transform: perspective(400px) scale(1);
        -ms-animation-timing-function: ease-in
    }
}

@keyframes flip {
    0% {
        transform: perspective(400px) rotateY(0);
        animation-timing-function: ease-out
    }
    40% {
        transform: perspective(400px) translateZ(150px) rotateY(170deg);
        animation-timing-function: ease-out
    }
    50% {
        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        animation-timing-function: ease-in
    }
    80% {
        transform: perspective(400px) rotateY(360deg) scale(0.95);
        animation-timing-function: ease-in
    }
    100% {
        transform: perspective(400px) scale(1);
        animation-timing-function: ease-in
    }
}

/* 翻入-X轴 */
@-webkit-keyframes flipinX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg)
    }
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg)
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(0);
        opacity: 1
    }
}

@-moz-keyframes flipinX {
    0% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
    40% {
        -moz-transform: perspective(400px) rotateX(-10deg)
    }
    70% {
        -moz-transform: perspective(400px) rotateX(10deg)
    }
    100% {
        -moz-transform: perspective(400px) rotateX(0);
        opacity: 1
    }
}

@-ms-keyframes flipinX {
    0% {
        -ms-transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
    40% {
        -ms-transform: perspective(400px) rotateX(-10deg)
    }
    70% {
        -ms-transform: perspective(400px) rotateX(10deg)
    }
    100% {
        -ms-transform: perspective(400px) rotateX(0);
        opacity: 1
    }
}

@keyframes flipinX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
    40% {
        transform: perspective(400px) rotateX(-10deg)
    }
    70% {
        transform: perspective(400px) rotateX(10deg)
    }
    100% {
        transform: perspective(400px) rotateX(0);
        opacity: 1
    }
}

/* 翻入-Y轴 */
@-webkit-keyframes flipinY {
    0% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
    40% {
        -webkit-transform: perspective(400px) rotateY(-10deg)
    }
    70% {
        -webkit-transform: perspective(400px) rotateY(10deg)
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(0);
        opacity: 1
    }
}

@-moz-keyframes flipinY {
    0% {
        -moz-transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
    40% {
        -moz-transform: perspective(400px) rotateY(-10deg)
    }
    70% {
        -moz-transform: perspective(400px) rotateY(10deg)
    }
    100% {
        -moz-transform: perspective(400px) rotateY(0);
        opacity: 1
    }
}

@-ms-keyframes flipinY {
    0% {
        -ms-transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
    40% {
        -ms-transform: perspective(400px) rotateY(-10deg)
    }
    70% {
        -ms-transform: perspective(400px) rotateY(10deg)
    }
    100% {
        -ms-transform: perspective(400px) rotateY(0);
        opacity: 1
    }
}

@keyframes flipinY {
    0% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
    40% {
        transform: perspective(400px) rotateY(-10deg)
    }
    70% {
        transform: perspective(400px) rotateY(10deg)
    }
    100% {
        transform: perspective(400px) rotateY(0);
        opacity: 1
    }
}

/* 翻出-X轴 */
@-webkit-keyframes flipoutX {
    0% {
        -webkit-transform: perspective(400px) rotateX(0);
        opacity: 1
    }
    100% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

@-moz-keyframes flipoutX {
    0% {
        -moz-transform: perspective(400px) rotateX(0);
        opacity: 1
    }
    100% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

@-ms-keyframes flipoutX {
    0% {
        -ms-transform: perspective(400px) rotateX(0);
        opacity: 1
    }
    100% {
        -ms-transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

@keyframes flipoutX {
    0% {
        transform: perspective(400px) rotateX(0);
        opacity: 1
    }
    100% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0
    }
}

/* 翻出-Y轴 */
@-webkit-keyframes flipoutY {
    0% {
        -webkit-transform: perspective(400px) rotateY(0);
        opacity: 1
    }
    100% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
}

@-moz-keyframes flipoutY {
    0% {
        -moz-transform: perspective(400px) rotateY(0);
        opacity: 1
    }
    100% {
        -moz-transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
}

@-ms-keyframes flipoutY {
    0% {
        -ms-transform: perspective(400px) rotateY(0);
        opacity: 1
    }
    100% {
        -ms-transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
}

@keyframes flipoutY {
    0% {
        transform: perspective(400px) rotateY(0);
        opacity: 1
    }
    100% {
        transform: perspective(400px) rotateY(90deg);
        opacity: 0
    }
}

/* 闪烁 */
@-webkit-keyframes flash {
    0%, 50%, 100% {
        opacity: 1
    }
    25%, 75% {
        opacity: 0
    }
}

@-moz-keyframes flash {
    0%, 50%, 100% {
        opacity: 1
    }
    25%, 75% {
        opacity: 0
    }
}

@-ms-keyframes flash {
    0%, 50%, 100% {
        opacity: 1
    }
    25%, 75% {
        opacity: 0
    }
}

@keyframes flash {
    0%, 50%, 100% {
        opacity: 1
    }
    25%, 75% {
        opacity: 0
    }
}

/* 震颤 */
@-webkit-keyframes shake {
    0%, 100% {
        -webkit-transform: translateX(0)
    }
    10%, 30%, 50%, 70%, 90% {
        -webkit-transform: translateX(-10px)
    }
    20%, 40%, 60%, 80% {
        -webkit-transform: translateX(10px)
    }
}

@-moz-keyframes shake {
    0%, 100% {
        -moz-transform: translateX(0)
    }
    10%, 30%, 50%, 70%, 90% {
        -moz-transform: translateX(-10px)
    }
    20%, 40%, 60%, 80% {
        -moz-transform: translateX(10px)
    }
}

@-ms-keyframes shake {
    0%, 100% {
        -ms-transform: translateX(0)
    }
    10%, 30%, 50%, 70%, 90% {
        -ms-transform: translateX(-10px)
    }
    20%, 40%, 60%, 80% {
        -ms-transform: translateX(10px)
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0)
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px)
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px)
    }
}

/* 摇摆 */
@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate(15deg)
    }
    40% {
        -webkit-transform: rotate(-10deg)
    }
    60% {
        -webkit-transform: rotate(5deg)
    }
    80% {
        -webkit-transform: rotate(-5deg)
    }
    100% {
        -webkit-transform: rotate(0)
    }
}

@-moz-keyframes swing {
    20% {
        -moz-transform: rotate(15deg)
    }
    40% {
        -moz-transform: rotate(-10deg)
    }
    60% {
        -moz-transform: rotate(5deg)
    }
    80% {
        -moz-transform: rotate(-5deg)
    }
    100% {
        -moz-transform: rotate(0)
    }
}

@-ms-keyframes swing {
    20% {
        -ms-transform: rotate(15deg)
    }
    40% {
        -ms-transform: rotate(-10deg)
    }
    60% {
        -ms-transform: rotate(5deg)
    }
    80% {
        -ms-transform: rotate(-5deg)
    }
    100% {
        -ms-transform: rotate(0)
    }
}

@keyframes swing {
    20% {
        transform: rotate(15deg)
    }
    40% {
        transform: rotate(-10deg)
    }
    60% {
        transform: rotate(5deg)
    }
    80% {
        transform: rotate(-5deg)
    }
    100% {
        transform: rotate(0)
    }
}

/* 摇晃 */
@-webkit-keyframes wobble {
    0% {
        -webkit-transform: translateX(0)
    }
    15% {
        -webkit-transform: translateX(-100px) rotate(-5deg)
    }
    30% {
        -webkit-transform: translateX(80px) rotate(3deg)
    }
    45% {
        -webkit-transform: translateX(-65px) rotate(-3deg)
    }
    60% {
        -webkit-transform: translateX(40px) rotate(2deg)
    }
    75% {
        -webkit-transform: translateX(-20px) rotate(-1deg)
    }
    100% {
        -webkit-transform: translateX(0)
    }
}

@-moz-keyframes wobble {
    0% {
        -moz-transform: translateX(0)
    }
    15% {
        -moz-transform: translateX(-100px) rotate(-5deg)
    }
    30% {
        -moz-transform: translateX(80px) rotate(3deg)
    }
    45% {
        -moz-transform: translateX(-65px) rotate(-3deg)
    }
    60% {
        -moz-transform: translateX(40px) rotate(2deg)
    }
    75% {
        -moz-transform: translateX(-20px) rotate(-1deg)
    }
    100% {
        -moz-transform: translateX(0)
    }
}

@-ms-keyframes wobble {
    0% {
        -ms-transform: translateX(0)
    }
    15% {
        -ms-transform: translateX(-100px) rotate(-5deg)
    }
    30% {
        -ms-transform: translateX(80px) rotate(3deg)
    }
    45% {
        -ms-transform: translateX(-65px) rotate(-3deg)
    }
    60% {
        -ms-transform: translateX(40px) rotate(2deg)
    }
    75% {
        -ms-transform: translateX(-20px) rotate(-1deg)
    }
    100% {
        -ms-transform: translateX(0)
    }
}

@keyframes wobble {
    0% {
        transform: translateX(0)
    }
    15% {
        transform: translateX(-100px) rotate(-5deg)
    }
    30% {
        transform: translateX(80px) rotate(3deg)
    }
    45% {
        transform: translateX(-65px) rotate(-3deg)
    }
    60% {
        transform: translateX(40px) rotate(2deg)
    }
    75% {
        transform: translateX(-20px) rotate(-1deg)
    }
    100% {
        transform: translateX(0)
    }
}

/* 震铃 */
@-webkit-keyframes ring {
    0% {
        -webkit-transform: scale(1)
    }
    10%, 20% {
        -webkit-transform: scale(0.9) rotate(-3deg)
    }
    30%, 50%, 70%, 90% {
        -webkit-transform: scale(1.1) rotate(3deg)
    }
    40%, 60%, 80% {
        -webkit-transform: scale(1.1) rotate(-3deg)
    }
    100% {
        -webkit-transform: scale(1) rotate(0)
    }
}

@-moz-keyframes ring {
    0% {
        -moz-transform: scale(1)
    }
    10%, 20% {
        -moz-transform: scale(0.9) rotate(-3deg)
    }
    30%, 50%, 70%, 90% {
        -moz-transform: scale(1.1) rotate(3deg)
    }
    40%, 60%, 80% {
        -moz-transform: scale(1.1) rotate(-3deg)
    }
    100% {
        -moz-transform: scale(1) rotate(0)
    }
}

@-ms-keyframes ring {
    0% {
        -ms-transform: scale(1)
    }
    10%, 20% {
        -ms-transform: scale(0.9) rotate(-3deg)
    }
    30%, 50%, 70%, 90% {
        -ms-transform: scale(1.1) rotate(3deg)
    }
    40%, 60%, 80% {
        -ms-transform: scale(1.1) rotate(-3deg)
    }
    100% {
        -ms-transform: scale(1) rotate(0)
    }
}

@keyframes ring {
    0% {
        transform: scale(1)
    }
    10%, 20% {
        transform: scale(0.9) rotate(-3deg)
    }
    30%, 50%, 70%, 90% {
        transform: scale(1.1) rotate(3deg)
    }
    40%, 60%, 80% {
        transform: scale(1.1) rotate(-3deg)
    }
    100% {
        transform: scale(1) rotate(0)
    }
}

/*4.1 按钮组
  Name:     mod_btn-group
  Example:
<div class="btn-group">
  <span class="btn btn-primary radius">左边按钮</span>
  <span class="btn btn-default radius">中间按钮</span>
  <span class="btn btn-default radius">中间按钮</span>
  <span class="btn btn-default radius">右边按钮</span>
</div>
  Explain:
*/
.btn-group {
    font-size: 0
}

.btn-group .btn {
    margin-left: -1px
}

.btn-group .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
    border-radius: 0
}

.btn-group > .btn:first-child:not(:last-child):not(.dropdown-toggle) {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0
}

.btn-group > .btn:last-child:not(:first-child), .btn-group > .dropdown-toggle:not(:first-child) {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0
}

/*4.2.1 导航条
	Name:			mod_nav
	Example:
<header class="Hui-navbar">
	<nav class="nav navbar-nav nav-collapse" role="navigation" id="Hui-navbar">
		<ul class="clearfix">
			<li class="current"><a href="/">首页</a></li>
			<li><a href="#">核心</a></li>
			<li><a href="#">扩展</a></li>
			<li class="dropDown dropDown_hover"><a href="#" class="dropDown_A">一级导航 <i class="Hui-iconfont">&#xe6d5;</i></a>
				<ul class="dropDown-menu menu radius box-shadow">
					<li><a href="#">二级导航</a></li>
					<li><a href="#">二级导航<i class="arrow Hui-iconfont">&#xe6d7;</i></a>
						<ul class="menu">
							<li><a href="javascript:;">三级菜单<i class="arrow Hui-iconfont">&#xe6d7;</i></a>
								<ul class="menu">
									<li><a href="javascript:;">四级菜单</a></li>
									<li><a href="javascript:;">四级菜单</a></li>
									<li><a href="javascript:;">四级菜单</a></li>
								</ul>
							</li>
							<li><a href="#">三级导航</a></li>
						</ul>
					</li>
					<li><a href="#">二级导航</a></li>
					<li class="disabled"><a href="javascript:;">二级菜单</a></li>
				</ul>
			</li>
			<li><a href="#">联系我们</a></li>
		</ul>
	</nav>
</header>
	Explain: 鼠标经过状态a:hover，当前选中状态li:current。
*/
/*导航条*/
.Hui-navbar {
    height: 45px
}

.navbar {
    position: relative;
    z-index: 1030;
    background-color: #fff
}

.navbar-black {
    background-color: #222
}

.navbar-fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030
}

/*logo*/
.logo {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: left center;
    background-size: auto 100%
}

a.logo:hover {
    text-decoration: none
}

.navbar .logo {
    height: 44px;
    line-height: 44px;
    margin-right: 10px;
    float: left
}

.navbar-logo, .navbar-logo-m {
    font-size: 16px
}

.navbar-slogan {
    font-size: 12px;
    cursor: default
}

.navbar .container {
    position: relative
}

.navbar .container .navbar-userbar {
    right: 0px
}

/*导航*/
.nav {
    z-index: 1
}

.nav > ul {
    font-size: 0;
    line-height: 0
}

.nav > ul > li {
    position: relative;
    float: left
}

.nav > ul > li, .nav > ul > li > a {
    display: inline-block;
    text-align: center
}

.nav > ul > li > a {
    padding: 0 20px
}

.nav > ul > li > a:hover, .nav > ul > li.current > a {
    background-color: rgba(255, 255, 255, 0.2);
    text-decoration: none;
    -webkit-transition: background-color 0.3s ease 0s;
    -moz-transition: background-color 0.3s ease 0s;
    -o-transition: background-color 0.3s ease 0s;
    -ms-transition: background-color 0.3s ease 0s;
    transition: background-color 0.3s ease 0s
}

.navbar-nav > ul > li, .navbar-nav > ul > li > a {
    line-height: 44px;
    font-size: 14px
}

@media (max-width: 767px) {
    .Hui-navbar {
        height: 45px !important
    }

    .logo {
        margin-right: 0
    }

    .navbar .logo {
        height: 44px !important;
        line-height: 44px !important
    }

    .navbar-nav {
        display: none;
        float: none !important
    }

    .navbar-nav > ul > li {
        width: 100%;
        text-align: left;
        border-bottom: solid 1px #eee
    }

    .navbar-nav > ul > li > a {
        display: block;
        padding: 0 15px;
        text-align: left
    }

    .navbar-nav > ul > li.dropDown.open > .dropDown-menu {
        display: none
    }

    .navbar-nav > ul > li.dropDown > .dropDown_A > .Hui-iconfont {
        display: none
    }

    .navbar-nav > ul > li,
    .navbar-nav > ul > li > a {
        height: 44px !important;
        line-height: 44px !important
    }

    .nav-collapse > ul, .nav-collapse > ul > li {
        width: 100%;
        display: block
    }

    .js .nav-collapse {
        position: absolute;
        display: block;
        float: none;
        clear: both;
        max-height: 0;
        clip: rect(0 0 0 0);
        margin-left: -15px;
        margin-right: -15px;
        overflow: hidden;
        -webkt-transition: max-height 284ms ease 0s;
        -moz-transition: max-height 284ms ease 0s;
        -o-transition: max-height 284ms ease 0s;
        -ms-transition: max-height 284ms ease 0s;
        transition: max-height 284ms ease 0s
    }

    .js-nav-active .nav-collapse.closed {
        max-height: none
    }

    .nav-collapse.opened {
        max-height: 9999px
    }

}

/*导航条风格-黑色*/
.navbar-black {
    background-color: #222;
    border-bottom: #080808 1px solid;
    -moz-box-shadow: 0 0 4px #333333;
    -webkit-box-shadow: 0 0 4px #333333;
    box-shadow: 0 0 4px #333333
}

.navbar-black .logo {
    color: #fff
}

.navbar-black .navbar-logo-m {
    color: #eee
}

.navbar-black .navbar-nav > ul > li,
.navbar-black .navbar-nav > ul > li > a {
    color: #fff
}

.navbar-black .navbar-nav > ul > li > a:hover,
.navbar-black .navbar-nav > ul > li.current > a {
    color: #fff
}

.navbar-black .navbar-userbar {
    color: #fff
}

@media (max-width: 767px) {
    .navbar-black .navbar-nav > ul > li {
        border-bottom: solid 1px #222
    }

    .navbar-black .navbar-nav > ul > li > a:hover,
    .navbar-black .navbar-nav > ul > li.current > a {
        background: #777
    }
}

/*面包导航*/
.nav-toggle, a.nav-toggle {
    position: absolute;
    top: 0px;
    right: 15px;
    font-size: 20px;
    color: #999;
    padding: 6px 11px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none
}

.nav-toggle:hover, a.nav-toggle:hover {
    text-decoration: none;
    color: #fff
}

/*2.1.9 版本之前的导航条代码*/
.mainnav {
    z-index: 1;
    background-color: #222
}

/*导航条背景*/
.mainnav > ul {
    font-size: 0;
    line-height: 0
}

.mainnav > ul > li,
.mainnav > ul > li > a {
    height: 40px;
    line-height: 40px
}

/*导航条高度*/
.mainnav > ul > li {
    display: inline-block;
    color: #fff;
    font-size: 14px;
    font-weight: bold
}

/*设置字体*/
.mainnav > ul > li > a {
    display: inline-block;
    padding: 0 20px;
    color: #fff;
    text-align: center
}

/*链接颜色*/
.mainnav > ul > li > a:hover,
.mainnav > ul > li.current > a {
    color: #fff;
    text-decoration: none;
    background-color: #000;
    -webkit-transition: background-color 0.3s ease 0s;
    -moz-transition: background-color 0.3s ease 0s;
    -o-transition: background-color 0.3s ease 0s;
    -ms-transition: background-color 0.3s ease 0s;
    transition: background-color 0.3s ease 0s
}

/*交互颜色*/

.Hui-nav-toggle, a.Hui-nav-toggle {
    position: absolute;
    top: 0px;
    right: 15px;
    font-size: 20px;
    color: #999;
    padding: 6px 11px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff
}

.Hui-nav-toggle:hover, a.Hui-nav-toggle:hover {
    text-decoration: none;
    color: #fff
}

@media (max-width: 767px) {
    .mainnav > ul > li {
        font-size: 1.125em
    }
}

@media (max-width: 480px) {
    .mainnav > ul > li {
        text-align: center
    }

    .mainnav > ul > li {
        width: 20%
    }

    .mainnav > ul > li > a {
        padding: 0;
        padding: 0;
        display: block
    }
}

/*4.2.2 面包屑导航
	Name:			mod_breadcrumb
	Example:
<nav class="breadcrumb">
  <div class="container">
    <i class="Hui-iconfont">&#xe67f;</i> <a href="/" class="c-primary">首页</a><span class="c-gray en">&gt;</span><a href="#">组件</a><span class="c-gray en">&gt;</span><span class="c-gray">当前页面</span>
  </div>
</nav>
*/
.breadcrumb {
    border-bottom: 1px solid #E5E5E5;
    line-height: 39px;
    height: 39px;
    overflow: hidden
}

.breadcrumb span {
    padding: 0 5px
}

@media (max-width: 767px) {
    .breadcrumb > .container {
        padding: 0
    }
}

/*4.2.3 翻页导航
	Name:			mod_pageNav
	Example:		<div class="pageNav" id="pageNav"></div>
	Explain:		需要调用pagenav.cn.js

*/
.pageNav {
    float: none;
    clear: both;
    font-size: 0;
    font-family: Arial, Helvetica, sans-serif;
    padding: 18px 0;
    text-align: center
}

.pageNav span, .pageNav a, .pageNav b {
    font-size: 14px;
    margin-right: 5px;
    overflow: hidden;
    padding: 3px 8px
}

.pageNav a {
    border: 1px solid #CCDBE4;
    cursor: pointer
}

.pageNav b {
    color: #000
}

.pageNav .mor {
    padding: 3px;
    font-weight: bold
}

/*4.2.4 顶部导航
	Name:			mod_topnav
	Sample:
	<div class="topnav"><div class="cl"><div class="l">您好，欢迎来到Hui！</div><div class="r"><span class="r_nav">[ <a rel="nofollow" href="javascript:login();">登录</a> ]</span><span class="pipe">|</span><span class="r_nav">[ <a href="javascript:register();" rel="nofollow">注册</a> ]</span><span class="pipe">|</span><span class="r_nav"><a title="收藏" href="javascript:addFavorite();">收藏本站</a></span><span class="pipe">|</span><span class="r_nav"><a href="javascript:void(0)" onclick="setHome(this);" title="设为首页">设为首页</a></span></div></div></div>

*/
.topnav {
    height: 30px;
    line-height: 30px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #EBEBEB;
    font-size: 12px
}

.topbar {
    background-color: #ECECEC;
    border-bottom: 1px solid #ddd
}

.topbar a {
    margin-right: 5px
}

.r_nav {
    display: inline-block;
    color: #999
}

/*4.2.5 向导
	Name:			mod_steps
	Sample:
	<div class="four steps">
	  <span class="step">第一步</span>
	  <span class="active step">第二步</span>
	  <span class="disabled step">第三步</span>
	  <span class="disabled step">第四步</span>
	</div>
*/
.steps, .step {
    display: inline-block;
    position: relative;
    padding: 1em 2em 1em 3em;
    vertical-align: top;
    background-color: #FFF;
    color: #888;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
}

.step:after, .steps .step:after {
    position: absolute;
    z-index: 2;
    content: '';
    top: 0;
    right: -1.45em;
    border-bottom: 1.5em solid transparent;
    border-left: 1.5em solid #FFF;
    border-top: 1.5em solid transparent;
    width: 0;
    height: 0
}

.step, .steps .step, .steps .step:after {
    -webkit-transition: opacity .1s ease, color .1s ease, -webkit-box-shadow .1s ease;
    transition: opacity .1s ease, color .1s ease, box-shadow .1s ease
}

.steps {
    cursor: pointer;
    display: inline-block;
    font-size: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
    border-radius: .3125rem;
    line-height: 1;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box
}

.steps .step:first-child {
    padding-left: 1.35em;
    border-radius: .3125em 0 0 .3125em
}

.steps .step:last-child {
    border-radius: 0 .3125em .3125em 0
}

.steps .step:only-child {
    border-radius: .3125em
}

.steps .step:last-child {
    margin-right: 0
}

.steps .step:last-child:after {
    display: none
}

.step:hover, .step.hover {
    background-color: #F7F7F7;
    color: rgba(0, 0, 0, .8)
}

.steps .step.hover:after,
.steps .step:hover:after,
.step:hover,
.step.hover::after {
    border-left-color: #F7F7F7
}

.steps .step.down,
.steps .step:active,
.step.down,
.step:active {
    background-color: #F0F0F0
}

.steps .step.down:after,
.steps .step:active:after,
.steps.down::after,
.steps:active::after {
    border-left-color: #F0F0F0
}

.steps .step.active,
.active.step {
    cursor: auto;
    background-color: #428BCA;
    color: #FFF;
    font-weight: 700
}

.steps .step.active:after, .active.steps:after {
    border-left-color: #428BCA
}

.steps .disabled.step,
.disabled.step {
    cursor: auto;
    background-color: #FFF;
    color: #CBCBCB
}

.disabled.step:after {
    border: 0;
    background-color: #FFF;
    top: .42em;
    right: -1em;
    width: 2.15em;
    height: 2.15em;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, .1) inset
}

.attached.steps {
    margin: 0;
    border-radius: .3125em .3125em 0 0
}

.attached.steps .step:first-child {
    border-radius: .3125em 0 0
}

.attached.steps .step:last-child {
    border-radius: 0 .3125em 0 0
}

.bottom.attached.steps {
    margin-top: -1px;
    border-radius: 0 0 .3125em .3125em
}

.bottom.attached.steps .step:first-child {
    border-radius: 0 0 0 .3125em
}

.bottom.attached.steps .step:last-child {
    border-radius: 0 0 .3125em
}

/*向导数量*/
.one.steps, .two.steps, .three.steps, .four.steps, .five.steps, .six.steps, .seven.steps, .eight.steps {
    display: block
}

.one.steps > .step {
    width: 100%
}

.two.steps > .step {
    width: 50%
}

.three.steps > .step {
    width: 33.333%
}

.four.steps > .step {
    width: 25%
}

.five.steps > .step {
    width: 20%
}

.six.steps > .step {
    width: 16.666%
}

.seven.steps > .step {
    width: 14.285%
}

.eight.steps > .step {
    width: 12.5%
}

/*向导尺寸*/
.small.step, .small.steps .step {
    font-size: .8rem
}

/*小*/
.step, .steps .step {
    font-size: 1rem
}

/*默认*/
.large.step, .large.steps .step {
    font-size: 1.25rem
}

/*大*/

/*兼容写法
	Sample:
	<div class="steps-ie cl">
	  <a class="step-ie active" href="#">第一步<em class="arrow"></em></a>
	  <a class="step-ie" href="#">第二步<em class="arrow"></em></a>
	  <a class="step-ie" href="#">第三步<em class="arrow"></em></a>
	</div>
*/
.steps-ie, .step-ie, .step-ie .arrow {
    height: 44px;
    line-height: 44px
}

.steps-ie {
    background-color: #eaf4fd;
    border: solid 1px #afcfcc
}

.step-ie {
    position: relative;
    display: inline-block;
    float: left;
    cursor: pointer;
    padding: 0 20px 0 40px;
    background: url(../images/steps/step_bg.png) repeat-x 0 center
}

.step-ie .arrow {
    position: absolute;
    right: -21px;
    top: 0;
    width: 21px;
    height: 44px;
    display: block;
    cursor: pointer;
    background: url(../images/steps/step_arrow.png) no-repeat 0 center;
    z-index: 50
}

.step-ie.active {
    background-image: url(../images/steps/step_bg-active.png);
    color: #fff;
    z-index: 100
}

.step-ie.active .arrow {
    background-image: url(../images/steps/step_arrow-active.png)
}

/*4.2.6 竖向导向tab导航
	Sample:
	<div class="verticalTab">
	  <a class="" href="#">导航一<em></em></a>
	  <a class="active" href="#">导航二<em></em></a>
	  <a href="#">导航三<em></em></a>
	  <a href="#">导航四<em></em></a>
	</div>
*/
.verticalTab {
    background: #fff url(../images/verticalTab/tab_bg.png) repeat-y 0 0;
    width: 38px
}

.verticalTab a {
    position: relative;
    display: block;
    width: 18px;
    height: auto;
    text-align: center;
    position: relative;
    padding: 26px 10px 6px 10px;
    background: url(../images/verticalTab/tabNav.png) no-repeat 0 0
}

.verticalTab a em {
    position: absolute;
    left: 0;
    bottom: -20px;
    width: 38px;
    height: 20px;
    background: url(../images/tabNav_right.png) no-repeat 0 0;
    z-index: 50
}

.verticalTab a.active {
    background-image: url(../images/verticalTab/tabNav-active.png);
    color: #fff;
    z-index: 99
}

.verticalTab a.active em {
    background-image: url(../images/verticalTab/tabNav_right-active.png)
}

/*4.2.6 横向导向tab导航
	Sample:
	<ul class="acrossTab">
	  <li>导航一<i></i><em></em></li>
	  <li class="active">导航二<i></i><em></em></li>
	  <li>导航三<i></i><em></em></li>
	</ul>
*/
.acrossTab, .acrossTab li, .acrossTab li em {
    background-image: url(../images/acrossTab/acrossTab-bg.png)
}

.acrossTab {
    height: 29px;
    background-repeat: repeat-x;
    background-position: 0 0;
    padding-top: 1px
}

.acrossTab li, .acrossTab li em {
    background-repeat: no-repeat;
    background-position: 0 0
}

.acrossTab li {
    position: relative;
    float: left;
    display: inline-block;
    height: 29px;
    line-height: 29px;
    font-size: 12px;
    cursor: pointer;
    padding: 0 30px;
    white-space: nowrap;
    color: #282828;
    background-position: 0 0
}

.acrossTab li em {
    position: absolute;
    width: 23px;
    height: 29px;
    right: -20px;
    top: 0;
    z-index: 50;
    background-position: right -30px
}

.acrossTab li:hover {
    background-position: 0 -60px
}

.acrossTab li:hover em {
    background-position: right -90px
}

.acrossTab li.active {
    background-position: 0 -120px;
    z-index: 99
}

.acrossTab li.active em {
    background-position: right -150px
}

.acrossTab li i {
    position: absolute;
    display: block;
    width: 13px;
    height: 13px;
    top: 50%;
    margin-top: -6px;
    right: 5px;
    font-size: 0;
    line-height: 0;
    cursor: pointer;
    background-image: url(../images/acrossTab/acrossTab-close.png);
    background-repeat: no-repeat;
    background-position: 0 0
}

.acrossTab li i:hover {
    background-position: 0 bottom
}

/*4.3.1 下拉菜单
	Name:			mod_dropDown
	Example:
	<span class="dropDown">
		<a class="dropDown_A" href="#">下拉菜单</a>
		<ul class="dropDown-menu menu radius box-shadow">
			<li><a href="#">菜单一</a></li>
			<li><a href="#">菜单二</a></li>
		</ul>
	</span>
	Explain:		如需要在不同的地方显示不同的样式，请在<span class="dropDown"> 追加class，采用覆盖的方式重写默认样式。

*/
.dropDown {
    display: inline-block
}

.dropDown_A {
    display: inline-block
}

.dropDown-menu {
    display: none;
    transition: all 0.3s ease 0s
}

.dropDown:focus, .dropDown-menu:focus {
    outline: 0
}

.dropDown-menu li.arrow {
    position: absolute;
    display: block;
    width: 12px;
    height: 8px;
    margin-top: -13px;
    margin-left: 20%;
    line-height: 0;
    background: url(../images/dropDown/icon-jt.png) no-repeat 0 0
}

/*鼠标经过*/
.dropDown.hover .dropDown_A,
.dropDown.open .dropDown_A {
    text-decoration: none;
    background-color: rgba(255, 255, 255, 0.2)
}

.dropDown.open .dropDown_A .Hui-admin-menu-dropdown-arrow {
    transition-duration: 0.3s;
    transition-property: all;
    _background-position: 0 0;
    transform: rotate(180deg)
}

.menu {
    background-color: #fff;
    border: solid 1px #f2f2f2;
    display: inline-block
}

.menu.radius {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.menu.box-shadow {
    border-top: none
}

.menu > li {
    position: relative;
    clear: both;
    *float: left
}

.menu > li > a {
    display: block;
    border-bottom: solid 1px #f2f2f2;
    padding: 5px 20px;
    line-height: 1.8;
    text-align: left;
    font-weight: normal;
    white-space: nowrap;
    vertical-align: top
}

.menu > li:last-child > a {
    border-bottom: none
}

.menu > li > a:hover, .menu > li > a:focus, .menu > li.open > a {
    text-decoration: none;
    background-color: #fafafa
}

.menu > li > a .arrow {
    position: absolute;
    top: 50%;
    margin-top: -10px;
    right: 5px;
    line-height: 20px;
    height: 20px;
    color: #999
}

.menu > li > .menu {
    display: none
}

.menu > li.open > .menu {
    display: inline-block;
    position: absolute;
    left: 100%;
    top: -1px;
    min-width: 100%
}

/*禁用菜单*/
.menu > li.disabled > a {
    color: #999;
    text-decoration: none;
    cursor: no-drop;
    background-color: transparent
}

/*线条*/
.menu > li.divider {
    display: block;
    height: 0px;
    line-height: 0px;
    margin: 9px 0;
    overflow: hidden;
    border-top: solid 1px #eee
}

/*打开菜单*/
.dropDown > .dropDown-menu {
    display: none
}

.dropDown.open {
    position: relative;
    z-index: 990
}

/*默认左对齐*/
.dropDown.open > .dropDown-menu {
    position: absolute;
    z-index: 1000;
    display: inline-block;
    top: 100%;
    left: -1px;
    min-width: 100%;
    background-color: #fff;
    border: solid 1px #f2f2f2
}

/*右对齐*/
.dropDown.open.right > .dropDown-menu {
    right: -1px !important;
    left: auto !important
}

/*4.4 幻灯片
	Name:			module_slider
	Sample:
<div id="slider-1">
  <div class="slider">
    <div class="bd">
      <ul>
        <li><a href="http://www.h-ui.net/" target="_blank"><img src="temp/banner1.jpg" ></a></li>
        <li><a href="http://www.h-ui.net/zhaishang.shtml" target="_blank"><img src="temp/banner2.jpg" ></a></li>
        <li><a href="http://h-ui.net/H-ui.admin.shtml" target="_blank"><img src="temp/banner4.jpg" ></a></li>
      </ul>
    </div>
    <ol class="hd cl dots">
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ol>
  </div>
</div>
	<script type="text/javascript" src="lib/jquery.SuperSlide/2.1.1/jquery.SuperSlide.min.js"></script>
	<script type="text/javascript">
	$(function() {
		jQuery("#slider-1 .slider").slide({mainCell:".bd ul",titCell:".hd li",trigger:"click",effect:"leftLoop",autoPlay:true,delayTime:700,interTime:3000,pnLoop:false,titOnClassName:"active"});
	});
	</script>
	Explain: 默认dots为圆点，在slider后面追加numSlider样式就变成带数字的方框，boxSlider为不带数字长方条
*/
.slider {
    position: relative;
    text-align: center;
    margin: 0 auto;
    z-index: 1
}

.slider .bd, .slider .bd li, .slider .bd img {
    width: 100%;
    height: 100%
}

/*请给每个幻灯片套个div并设置id，通过id重置这个地方的宽度，达到自定义效果*/
.slider .bd {
    z-index: 2;
    overflow: hidden
}

.slider .bd li {
    float: left;
    width: 100%;
    overflow: hidden;
    background-position: center;
    background-repeat: no-repeat
}

.slider .bd li a {
    display: block;
    width: 100%;
    height: 100%
}

.slider .bd li img {
    display: block
}

.slider .hd {
    position: absolute;
    z-index: 3;
    left: 0;
    right: 0;
    bottom: 10px;
    padding: 0 10px;
    text-align: center
}

.slider .hd li {
    display: inline-block;
    text-align: center;
    margin-right: 10px;
    cursor: pointer;
    background-color: #C2C2C2
}

.slider .hd li.active {
    background-color: #222
}

/*圆点*/
.dots li {
    width: 10px;
    height: 10px;
    font-size: 0px;
    line-height: 0px;
    border-radius: 50%
}

/*数字*/
.numbox li {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 13px;
    font-family: Arial;
    font-weight: bold;
    text-indent: inherit
}

.numbox li.active {
    color: #fff
}

/*长方条*/
.rectangle li {
    width: 40px;
    height: 10px;
    font-size: 0px;
    line-height: 0px
}

.slider-arrow {
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    height: 50px;
    width: 50px;
    line-height: 50px;
    text-align: center;
    z-index: 3;
    opacity: 0.7;
    filter: alpha(opacity=70)
}

.slider-arrow:hover {
    opacity: 1;
    filter: alpha(opacity=100)
}

.slider-arrow.prev {
    left: 0px
}

.slider-arrow.next {
    right: 0px
}

/*4.5 选项卡
	Name:			module_slider
	Sample:
	<div id="tab_demo" class="HuiTab">
      <div class="tabBar clearfix"><span>选项卡一</span><span>选项卡二</span><span>自适应宽度</span></div>
      <div class="tabCon">内容一</div>
      <div class="tabCon">内容二</div>
      <div class="tabCon">内容三</div>
    </div>
*/
.tabBar {
    border-bottom: 1px solid #e8e8e8;
}

.tabBar span {
    cursor: pointer;
    display: inline-block;
    float: left;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    border-bottom: solid 2px #fff;
}

.tabBar span.current {
    border-bottom-color: #1890ff;
}

.tabCon {
    display: none;
}

/*4.6 标签与标号
	Name:			style_label
	Example:		<span class="label label-default|label-primary|label-secondary|label-success|label-warning|label-danger">默认</span>
	Explain:		.label-default 默认|.label-primary 主要|.label-secondary 次要|.label-success 成功|.label-warning 警告|.label-danger 危险

	Name:			style_badge
	Example:		<span class="badge badge-default|label-primary|badge-secondary|badge-success|badge-warning|badge-danger">默认</span>
	Explain:		.badge-default 默认|.badge-primary 主要|.badge-secondary 次要|.badge-success 成功|.badge-warning 警告|.badge-danger 危险

*/
.label, .badge {
    display: inline-block;
    padding: 2px 4px;
    font-size: 11.844px;
    font-weight: bold;
    line-height: 14px;
    color: #fff;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #999;
    overflow: hidden
}

/*圆角*/
.label.radius {
    border-radius: 3px
}

.badge {
    padding-right: 9px;
    padding-left: 9px;
    border-radius: 9px
}

.label:empty, .badge:empty {
    display: none
}

a.label:hover, a.label:focus, a.badge:hover, a.badge:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer
}

/*默认*/
.label-default, .badge-default {
    background-color: #e6e6e6;
    color: #333
}

.label-default[href], .badge-default[href] {
    background-color: #e6e6e6;
    color: #333
}

/*主要*/
.label-primary, .badge-primary {
    background-color: #5a98de
}

.label-primary[href], .badge-primary[href] {
    background-color: #5a98de
}

/*主要*/
.label-secondary, .badge-secondary {
    background-color: #3bb4f2
}

.label-secondary[href], .badge-secondary[href] {
    background-color: #3bb4f2
}

/*成功*/
.label-success, .badge-success {
    background-color: #5eb95e
}

.label-success[href], .badge-success[href] {
    background-color: #5eb95e
}

/*警告*/
.label-warning, .badge-warning {
    background-color: #f37b1d
}

.label-warning[href], .badge-warning[href] {
    background-color: #f37b1d
}

/*危险*/
.label-danger, .badge-danger {
    background-color: #dd514c
}

.label-danger[href], .badge-danger[href] {
    background-color: #dd514c
}

/*4.7 缩略图
	Name:       style_img
	Example:
	Explain:		缩略图 删除，转移到3.6 图片中
*/

/*4.8 警告
	Name:			mod_Hui-alert
	Example:
<div class="Huialert Huialert-success/Huialert-danger/Huialert-error/Huialert-info/Huialert-block">
	<i class="Hui-iconfont">&#xe6a6;</i>
	警告内容
	<ul>
		<li>……</li>
	</ul>
</div>
	Explain:		警告,使用警告框jQuery插件
*/
.Huialert {
    position: relative;
    padding: 8px 35px 8px 14px;
    margin-bottom: 20px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    background-color: #fcf8e3;
    border: 1px solid #fbeed5
}

.Huialert, .Huialert h4 {
    color: #c09853
}

.Huialert h4 {
    margin: 0
}

.Huialert .Hui-iconfont {
    position: absolute;
    top: 9px;
    right: 10px;
    line-height: 20px;
    cursor: pointer;
    color: #000;
    opacity: 0.2;
    _color: #666
}

.Huialert .Hui-iconfont.hover {
    color: #000;
    opacity: 0.8
}

.Huialert-success {
    color: #468847;
    background-color: #dff0d8;
    border-color: #d6e9c6
}

.Huialert-success h4 {
    color: #468847
}

.Huialert-danger {
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7
}

.Huialert-danger h4 {
    color: #b94a48
}

.Huialert-error {
    color: #fff;
    background-color: #f37b1d;
    border-color: #e56c0c
}

.Huialert-error h4 {
    color: #fff
}

.Huialert-info {
    color: #31708f;
    background-color: #d9edf7;
    border-color: #bce8f1
}

.Huialert-info h4 {
    color: #31708f
}

.Huialert-block {
    padding-top: 14px;
    padding-bottom: 14px
}

.Huialert-block > p, .Huialert-block > ul {
    margin-bottom: 0
}

.Huialert-block p + p {
    margin-top: 5px
}

/*4.9 进度条 loading
	Name:			mod_progress
	Example:
	<div class="progress radius"><div class="progress-bar"><span class="sr-only"></span></div></div>
	Explain:		警告,使用警告框jQuery插件
*/
.progress, .progress-bar, .sr-only {
    height: 10px;
    font-size: 0;
    line-height: 0
}

.progress {
    overflow: hidden;
    width: 400px
}

.progress.radius {
}

/*自定义圆角*/
.progress-bar {
    width: 100%;
    background-color: #efefef;
}

.sr-only {
    display: inline-block;
    background-color: #337ab7;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease;
}

.progress-bar-success .sr-only {
    background-color: #5cb85c
}

.progress-bar-warning .sr-only {
    background-color: #f0ad4e
}

.progress-bar-danger .sr-only {
    background-color: #d9534f
}

.loading-wrapper {
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(25, 24, 26, 0.34);
}

.loading-wrapper .loading-content {
    padding: 10px 20px;
    width: auto;
    height: auto;
    background-color: #fff;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    marigin-left: -50px;
    margin-top: -40px;
}

.loading-bar .iconpic-loading,
.loading-wrapper .iconpic-loading {
    width: 40px;
    height: 40px;
    background: #fff url(../images/loading/iconpic-loading.gif) no-repeat center;
}

.loading-wrapper .loading-content .iconpic,
.loading-wrapper .loading-content span {
    vertical-align: middle;
    font-size: 14px;
}

.loading-bar {
    text-align: center;
    padding: 30px;
    font-size: 20px;
    color: #666;
}

/*4.10 对话框
	Name:  mod_modal
	Example:
<div id="modal-demo" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<h3 id="myModalLabel">对话框标题</h3>
				<a class="close" data-dismiss="modal" aria-hidden="true" href="javascript:void();">×</a>
			</div>
			<div class="modal-body">
				<p>对话框内容…</p>
			</div>
			<div class="modal-footer">
				<button class="btn btn-primary">确定</button> <button class="btn" data-dismiss="modal" aria-hidden="true">关闭</button>
			</div>
		</div>
	</div>
</div>
*/
.fade {
    opacity: 0;
    -webkit-transition: opacity .15s linear;
    -o-transition: opacity .15s linear;
    transition: opacity .15s linear
}

.fade.in {
    opacity: 1
}

.modal-open {
    overflow: hidden
}

.modal {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    display: none;
    overflow: hidden;
    -webkit-overflow-scrolling: touch;
    outline: 0
}

.modal.fade .modal-dialog {
    -webkit-transition: -webkit-transform .3s ease-out;
    -o-transition: -o-transform .3s ease-out;
    transition: transform .3s ease-out;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%)
}

.modal.in .modal-dialog {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
    transform: translate(0, 0)
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto
}

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #000
}

.modal-backdrop.fade {
    filter: alpha(opacity=0);
    opacity: 0
}

.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .5
}

.modal-dialog {
    position: relative;
    margin: 10px
}

.modal-content {
    position: relative;
    background-color: #fff;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, .2);
    outline: 0;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5)
}

.modal-header {
    min-height: 16.42857143px;
    padding: 15px;
    border-bottom: 1px solid #eee;
    position: relative
}

.modal-header .close {
    position: absolute;
    right: 15px;
    top: 15px
}

.modal-close {
    position: absolute;
    right: 15px;
    top: 15px;
    font-size: 24px;
    z-index: 9
}

a.modal-close:hover {
    text-decoration: none
}

.modal-header h3, .modal-header .modal-title {
    margin: 0;
    padding: 10px 0;
    font-size: 16px
}

.modal-body {
    position: relative;
    padding: 15px;
    overflow-y: visible;
    word-break: break-all
}

.modal-form {
    margin-bottom: 0
}

.modal-footer {
    padding: 15px;
    margin-bottom: 0;
    text-align: right;
    background-color: #f5f5f5;
    border-top: 1px solid #eee;
    *zoom: 1
}

.modal-footer:before, .modal-footer:after {
    display: table;
    content: ""
}

.modal-footer:after {
    clear: both
}

.modal-footer .btn + .btn {
    margin-left: 5px;
    margin-bottom: 0
}

.modal-footer .btn-group .btn + .btn {
    margin-left: -1px
}

.modal-footer .btn-block + .btn-block {
    margin-left: 0
}

.modal-scrollbar-measure {
    position: absolute;
    top: -9999px;
    width: 50px;
    height: 50px;
    overflow: scroll
}

.radius .modal-content {
    border-radius: 6px
}

.radius .modal-footer {
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px
}

/*上下居中*/
.modal.middle .modal-dialog {
    position: absolute;
    margin: 10px;
    left: 0;
    right: 0;
    top: 50%
}

.modal.fade.middle .modal-dialog {
    -webkit-transform: translate(0, -100%);
    -ms-transform: translate(0, -100%);
    -o-transform: translate(0, -100%);
    transform: translate(0, -100%)
}

.modal.in.middle .modal-dialog {
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -o-transform: translate(0, -50%);
    transform: translate(0, -50%)
}


@media (min-width: 768px) {
    .modal-dialog {
        width: 600px;
        margin: 30px auto
    }

    .modal.middle .modal-dialog {
        margin: 10px auto
    }

    .modal-content {
        -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
        box-shadow: 0 5px 15px rgba(0, 0, 0, .5)
    }

    .modal-sm {
        width: 300px
    }
}

@media (min-width: 992px) {
    .modal-lg {
        width: 900px
    }
}


.modal-alert {
    position: fixed;
    right: auto;
    bottom: auto;
    width: 300px;
    left: 50%;
    margin-left: -150px;
    top: 50%;
    margin-top: -30px;
    z-index: 9999;
    background-color: #fff;
    border: 1px solid #999;
    border: 1px solid rgba(0, 0, 0, .2);
    outline: 0;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
    box-shadow: 0 3px 9px rgba(0, 0, 0, .5)
}

.modal-alert-info {
    padding: 30px;
    text-align: center;
    font-size: 14px;
    background-color: #fff
}


.loading {
    height: 50px;
    width: 50px;
    background: #fff url(../images/loading/loading-b.gif) no-repeat center
}

.mask {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    -moz-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in
}

* html .mask {
    position: absolute;
    left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth);
    top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight)
}

.mask_box {
    background-image: none;
    display: none;
    z-index: 99
}

.hover .mask_box {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    background-color: rgba(0, 0, 0, 0.3);
    text-align: left
}

.modal-open .dropdown-menu {
    z-index: 2050
}

.modal-open .dropdown.open {
    *z-index: 2050
}

.modal-open .popover {
    z-index: 2060
}

.modal-open .tooltip {
    z-index: 2070
}

/*	//old 版本

	//当弹出层出现时，隐藏body右侧滚动条
	.modal-open{overflow-x: hidden;overflow-y: auto}
	//隐藏body滚动条时，页面偏移
	.page-overflow{margin-right:16px}
	//弹出层，绝对定位，默认【宽度500px，高度自适应，背景白色，6px圆角，带阴影】，自定义宽度可在data-width中设置参数
	.modal {position:absolute;top:50%;left:50%; width:500px;margin-left:-250px;z-index:1050;overflow: visible;background-color: #fff;background-clip: padding-box;
		box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
		-webkit-background-clip:padding-box;
		-khtml-background-clip:padding-box;
		-moz-background-clip:padding-box;
		-ms-background-clip:padding-box;
		-o-background-clip:padding-box;
		background-clip:padding-box;
		border-radius:6px;
		border:1px solid rgba(0, 0, 0, 0.3);*border:1px solid #999}

	//弹出层进入动画效果
	.modal.fade {top: -100%}
	//弹出层进入后居顶距离，配合margin-top负值，实现上下自动居中
	.modal.fade.in{top:50%}
	//如果弹出层高度大于窗口，弹出窗口距顶0像素
	.modal.modal-overflow.fade.in{top:0}

	//隐藏body滚动条时，页面偏移
	.page-overflow{margin-right:16px}

	//弹出层的最外层，全屏，用户响应点击和滚动
	.modal-scrollable{position:fixed;top:0;right:0;bottom:0;left:0;overflow: auto}

	//弹窗超出屏幕高度时，弹出层替代body右侧滚动条，实现弹出层的整体滚动
	.modal-overflow .modal-scrollable{overflow-y:scroll}

	//默认遮罩层，全屏黑色
	.modal-backdrop {position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:1040;background-color:#000}
	//解决IE下 遮罩层兼容性
	* html .modal-backdrop{position:absolute;left:expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth);top:expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight)}

	//遮罩层失去时，透明度为0
	.modal-backdrop.fade {opacity:0;filter: alpha(opacity=0)}

	//遮罩层进入 0.7透明度
	.modal-backdrop,.modal-backdrop.fade.in {opacity: 0.7;filter: alpha(opacity=70)}

	//Ajax加载数据时loading
	.loading-spinner {position: absolute;top: 50%;left: 50%;margin: -12px 0 0 -12px}

	//弹出层header区
	//弹出层头部
	.modal-header {padding: 9px 15px;border-bottom: 1px solid #eee; position:relative}
	//关闭按钮，请调用4.1.1 按钮 .close
	.modal-header .close{position:absolute; right:10px; top:10px}
	//标题
	.modal-header h3{margin:0; padding:10px 0; font-size:16px}

	//内容不限高度，内填充15px，不满意可自行修改
	.modal-body {overflow-y:visible;padding: 15px; word-break:break-all}
	//弹出层表单
	.modal-form {margin-bottom: 0}
	//弹出层footer区，放按钮
	.modal-footer {padding: 14px 15px 15px;margin-bottom: 0;text-align: right;background-color: #f5f5f5;border-top: 1px solid #ddd;*zoom: 1;border-radius: 0 0 6px 6px;box-shadow: inset 0 1px 0 #fff}
	.modal-footer:before,.modal-footer:after {display: table;content: ""}
	.modal-footer:after {clear: both}
	.modal-footer .btn + .btn {margin-left: 5px;margin-bottom: 0}
	.modal-footer .btn-group .btn + .btn {margin-left: -1px}
	.modal-alert{position:fixed; width:300px;margin-left:-150px; margin-top:-30px; z-index:9999}
	.modal-alert-info{padding:30px; text-align:center; font-size:14px; background-color:#fff}*/

/*.easyDialog_wrapper{width:320px; color:#444; border:3px solid rgba(0,0,0,0);border-radius:5px;box-shadow:0 0 10px rgba(0,0,0,0.4); display:none}
.easyDialog_wrapper .easyDialog_content{border-radius:4px; background:#fff; border:1px solid #e5e5e5}
.easyDialog_wrapper .easyDialog_title{height:30px; line-height:30px; overflow:hidden; color:#666; padding:0 10px; font-size:14px; border-bottom:1px solid #e5e5e5; background:#f7f7f7; border-radius:4px 4px 0 0; margin:0 }
.easyDialog_wrapper .close_btn{font-family:arial; font-size:18px; _font-size:12px; font-weight:700; color:#999; text-decoration:none; float:right}
.easyDialog_wrapper .close_btn:hover{color:#333}
.easyDialog_wrapper .easyDialog_text{padding:25px 10px; font-size:13px; line-height:22px}
.easyDialog_wrapper .easyDialog_footer{padding:10px; text-align:right; *zoom:1}
.easyDialog_wrapper .easyDialog_footer:after{content:''; display:block; height:0; overflow:hidden; visibility:hidden; clear:both}
.easyDialog_wrapper .btn_highlight,.easyDialog_wrapper .btn_normal{border:1px solid; border-radius:2px; cursor:pointer;float:right; font-size:12px; padding:0 12px; height:24px; line-height:24px; margin-bottom:10px}
.easyDialog_wrapper .btn_highlight{background:#4787ed; background:-webkit-gradient(linear,center bottom,center top,from(#4787ed),to(#4d90fe)); background:-moz-linear-gradient(90deg, #4787ed, #4d90fe); border-color:#3079ed; color:#fff}
.easyDialog_wrapper .btn_normal{margin-left:10px; border-color:#c3c3c3; background:#ececec; color:#333; background:-webkit-gradient(linear,center bottom,center top,from(#ececec),to(#f4f4f4)); background:-moz-linear-gradient(90deg,#ececec,#f4f4f4)}*/

/*4.12 右侧悬浮工具
	Name:		modal_tools-right
*/
.tools-right {
    position: fixed;
    right: 15px;
    z-index: 999;
    cursor: pointer;
    visibility: visible;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    color: #9c9c9c;
    font-size: 16px;
    width: 38px;
    height: 38px;
    line-height: 38px;
    text-align: center;
    text-decoration: none;
    _position: absolute;
    _top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight)
}

.tools-right:hover {
    color: #fff;
    text-decoration: none;
    background-color: #999;
    border-color: #999
}

/*4.12.1 返回顶部
		Name:			mod_totop
		Level:			Global
		Example:		<a href="javascript:void(0)" class="tools-right toTop" title=backToTopTxt alt=backToTopTxt></a>
		Explain:		返回顶部
	*/
.tools-right.toTop {
    bottom: 60px;
    display: none
}

/*4.12.2 意见反馈
		Name:			mod_feedback
		Level:			Global
		Example:		<a href="javascript:;" class="tools-right feedback Hui-iconfont" title="意见反馈" onClick="feedback()">&#xe70c;</a>
		Explain:		意见反馈
	<div id="modal-feedback" class="modal hide fade">
		<div class="modal-header">
			 <h3>意见反馈</h3>
			 <a class="Hui-iconfont close" data-dismiss="modal" aria-hidden="true" href="javascript:void();">&#xe6a6;</a>
		</div>
		<div class="modal-body">
			<div>
				<label class="mr-20"><input type="radio" class="radio" value="1" name="radio-feedback" id="feedback-1"> 业务咨询</label>
				<label class="mr-20"><input type="radio" class="radio" value="2" name="radio-feedback" id="feedback-2"> 体验反馈</label>
				<label class="mr-20"><input type="radio" class="radio" value="3" name="radio-feedback" id="feedback-3"> 好点子</label>
			</div>
			<div class="form-controls mt-20">
				<textarea class="textarea valid" onKeyUp="$.Huitextarealength(this,500)" placeholder="吐槽点什么...最少输入10个字符"></textarea>
				<p class="textarea-numberbar"><em class="textarea-length">0</em>/500</p>
			</div>
		</div>
		<div class="modal-footer">
			<button class="btn btn-primary radius">确定</button>
			<button class="btn btn-default radius ml-10" data-dismiss="modal" aria-hidden="true">取消</button>
		</div>
	</div>
	*/
.tools-right.feedback {
    bottom: 110px
}

/*4.13 分享到
	Name:			mod_share
	Example:
	Explain:	分享到
*/
/*4.13.1 百度分享*/
.bdsharebuttonbox.Hui-share a.bds_more,
.bdsharebuttonbox.Hui-share a.bds_weixin,
.bdsharebuttonbox.Hui-share a.bds_qzone,
.bdsharebuttonbox.Hui-share a.bds_sqq,
.bdsharebuttonbox.Hui-share a.bds_tsina,
.bdsharebuttonbox.Hui-share a.bds_tqq,
.bdsharebuttonbox.Hui-share a.bds_douban {
    display: inline-block;
    background: none;
    padding-left: 0;
    text-decoration: none;
    margin: 0;
    margin-right: 6px;
    height: auto;
    line-height: auto
}

.bdsharebuttonbox.Hui-share a:hover {
    text-decoration: none
}

.bdsharebuttonbox.Hui-share .share-text {
    display: inline-block;
    margin-right: 6px;
    color: #999;
    cursor: default;
    float: left
}

.bdsharebuttonbox.bdshare-button-style0-16.Hui-share a,
.bdsharebuttonbox.bdshare-button-style0-16.Hui-share .share-text,
.bdsharebuttonbox.bdshare-button-style0-16.Hui-share .Hui-iconfont {
    line-height: 16px
}

.bdsharebuttonbox.bdshare-button-style0-16.Hui-share .share-text,
.bdsharebuttonbox.bdshare-button-style0-16.Hui-share .Hui-iconfont {
    font-size: 16px
}

.bdsharebuttonbox.bdshare-button-style0-24.Hui-share a,
.bdsharebuttonbox.bdshare-button-style0-24.Hui-share .share-text,
.bdsharebuttonbox.bdshare-button-style0-24.Hui-share .Hui-iconfont {
    line-height: 24px
}

.bdsharebuttonbox.bdshare-button-style0-24.Hui-share .share-text,
.bdsharebuttonbox.bdshare-button-style0-24.Hui-share .Hui-iconfont {
    font-size: 24px
}

/*4.13.2 jiathis分享*/
.Hui-share.jiathis_style_24x24 .jtico {
    background: none;
    padding-left: 0 !important
}

.Hui-share.jiathis_style_24x24 .jiathis_separator {
    margin-left: 0;
    margin-right: 6px
}

/*4.14 Panel 面板
	Name:			mod_panel
	Sample:
	<div class="panel panel-default">
		<div class="panel-body">默认面板</div>
	</div>
*/
.panel {
    background-color: #fff;
    border: solid 1px transparent
}

.panel-header {
    border-bottom: solid 1px #eee;
    padding: 8px 20px;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: -1px;
}

/*面板标题*/
.panel-body {
    padding: 20px
}

/*面板内容*/
.panel-footer {
    background-color: #f5f5f5;
    border-top: 1px solid #ddd;
    padding: 5px 20px
}

/*面板页脚*/
/*默认面板*/
.panel-default {
    border-color: #ddd
}

.panel-default > .panel-header {
    border-color: #ddd;
    background-color: #f5f5f5;
    color: #444
}

/*主要面板*/
.panel-primary {
    border-color: #5a98de
}

.panel-primary > .panel-header {
    border-color: #5a98de;
    background-color: #5a98de;
    color: #fff
}

/*次要面板*/
.panel-secondary {
    border-color: #3bb4f2
}

.panel-secondary > .panel-header {
    border-color: #3bb4f2;
    background-color: #3bb4f2;
    color: #fff
}

/*成功面板*/
.panel-success {
    border-color: #5eb95e
}

.panel-success > .panel-header {
    border-color: #5eb95e;
    background-color: #5eb95e;
    color: #fff
}

/*警告面板*/
.panel-warning {
    border-color: #f37b1d
}

.panel-warning > .panel-header {
    border-color: #f37b1d;
    background-color: #f37b1d;
    color: #fff
}

/*危险面板*/
.panel-danger {
    border-color: #dd514c
}

.panel-danger > .panel-header {
    border-color: #dd514c;
    background-color: #dd514c;
    color: #fff
}

/*4.15 案例
	Name:			mod_docs-example
	Example:		<div class="docs-example tooltip-demo">……</div>
*/
.docs-example {
    position: relative;
    *position: static;
    *padding-top: 19px;
    margin: 15px 0;
    padding: 39px 19px 14px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px
}

.docs-example:after {
    content: "Example";
    position: absolute;
    top: -1px;
    left: -1px;
    *position: static;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: bold;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    color: #9da0a4;
    border-radius: 4px 0 4px 0
}

/*4.16 滚动
	Name:			mod_rolling
	Example:		<div class="rollpicshow"><ul><li>……</li></ul></div>
*/
.marquee {
    height: 22px;
    overflow: hidden;
    line-height: 22px
}

.rollpic .prev, .rollpic .next {
    display: block;
    height: 38px;
    width: 38px;
    cursor: pointer;
    float: left;
    background: url(../images/rollpic/unslider-arrow.png) no-repeat 0 0;
    margin-top: 70px
}

.rollpic .prev {
    background-position: 0 0;
    margin-right: 5px
}

.rollpic .prev:hover {
    background-position: 0 -38px
}

.rollpic .next {
    background-position: 0 -76px;
    margin-left: 5px
}

.rollpic .next:hover {
    background-position: 0 -114px
}

.rollpicshow {
    float: left;
    border: solid 1px #ddd
}

.rollpicshow li {
    padding: 10px
}

/*4.17 搜索条
	Name:			mod_searchBar
	Sample:
<div class="searchBar">
  <form class="form-search" method="post" action="">
    <input id="searchKeyword" name="searchKeyword" value="请输入搜索关键词" class="input-text searchTxt">
    <input id="searchBtn" name="searchBtn" type="submit" value="搜索" class="btn btn-default searchBtn" onclick="b_onclick()">
  </form>
</div>
*/
/*搜索下拉提示*/
.ac_results {
    position: absolute;
    border: solid 1px #ddd;
    background-color: #fff;
    padding: 3px;
    display: none;
    margin-top: -1px;
    z-index: 999
}

.ac_results ul {
    width: 100%;
    list-style-position: outside;
    list-style: none;
    padding: 0;
    margin: 0
}

.ac_results li {
    padding-left: 5px;
    padding-right: 5px;
    display: block;
    height: 24px;
    line-height: 24px;
    cursor: pointer
}

.ac_results li p {
    float: left;
    margin: 0;
    padding: 0;
    overflow: hidden
}

.ac_results li p tt {
    color: #666
}

.ac_results li span {
    margin: 0;
    padding: 0;
    display: inline;
    float: right;
    color: #f93;
    width: 90px;
    text-align: right;
    overflow: hidden
}

.ac_results li.ac_even {
}

.ac_results li.ac_odd {
}

.ac_results li.ac_over {
    background-color: #f0f1f2
}

.ac_loading {
    background: #fff url(../images/loading/loading-s.gif) right center no-repeat
}

/*4.18.1 对联广告
	Name:			mod_AD_dual
	Sample:
	<div class="dual dual_l"><div class="dual_con">对联的内容</div><a href="#" class="dual_close">X关闭</a></div>
	<div class="dual dual_r"><div class="dual_con">对联的内容</div><a href="#" class="dual_close">X关闭</a></div>
*/
.AD {
    text-align: center
}

.dual {
    top: 260px;
    position: absolute;
    width: 102px;
    overflow: hidden;
    display: none;
    z-index: 100
}

.dual_l {
    left: 6px
}

.dual_r {
    right: 6px
}

.dual_con {
    border: #CCC solid 1px;
    width: 100px;
    height: 300px;
    overflow: hidden;
    background-color: #0C9
}

.dual_close {
    width: 100%;
    height: 24px;
    line-height: 24px;
    text-align: center;
    display: block;
    font-size: 13px;
    color: #555;
    text-decoration: none
}

/*4.19 标签*/
/*4.19.1 标签输入效果
		Name:			mod_Hui-tags
		Sample:
		<div class="Hui-tags">
		  <div class="Hui-tags-editor cl"><i class="Hui-tags-icon"></i>
			<span class="Hui-tags-token">Hui前端框架</span>
			<span class="Hui-tags-token">CSS3</span>
			<span class="Hui-tags-token">HTML5</span>
			<div class="Hui-tags-iptwrap"><input type="text" class="Hui-tags-input" maxlength="20" value=""><label class="Hui-tags-label">添加相关标签，用空格或回车分隔</label></div>
		  </div>
		  <div class="Hui-tags-list">
			<div class="Hui-notag">暂无常用标签</div>
			<div class="Hui-tags-has"><span>前端框架</span> <span>前端开发</span> <span>H-ui</span></div>
		  </div>
		  <input type="hidden" class="Hui-tags-val" name="" value="">
		</div>
	*/
.Hui-tags,
.Huitags-wraper {
    border: solid 1px #dedede;
    padding: 0 10px
}

.Hui-tags-editor,
.Huitags-editor {
    position: relative;
    padding: 10px 0 10px 24px;
    min-height: 20px
}

.Hui-tags-editor .Hui-tags-icon,
.Huitags-editor .Huitags-icon {
    position: absolute;
    left: 0;
    top: 11px;
    font-size: 14px;
    color: #666
}

.Hui-tags-token,
.Huitags-token {
    color: #aaa;
    float: left;
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    margin-right: 8px;
    padding: 0 1px;
    white-space: nowrap;
    cursor: pointer
}

.Hui-tags-token:before,
.Huitags-token:before {
    content: "#"
}

.Hui-tags-token:hover,
.Huitags-token:hover {
    text-decoration: line-through
}

.Hui-tags-iptwrap {
    position: relative;
    float: left
}

.Huitags-input-wraper {
}

.Hui-tags-input {
    position: relative;
    height: 20px;
    min-width: 60px;
    border: 0 none;
    vertical-align: top;
    line-height: 20px;
    color: #333;
    z-index: 2;
    background: url(../images/Hui-tags/empty.png) repeat scroll 0 0;
    display: inline-block;
    width: 100%
}

.Huitags-input {
}

.Hui-tags-label,
.Huitags-label {
    position: absolute;
    top: 0;
    left: 2px;
    width: 240px;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    overflow: hidden;
    z-index: 1;
    color: #ccc
}

.Hui-tags-list,
.Huitags-list {
    padding: 0 0 10px 0;
}

.Hui-notag,
.Huitags-notag {
    font-size: 12px
}

.Hui-tags-has span,
.Huitags-has span {
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
    margin-right: 10px
}

/*4.19.2 标签混排效果
		Name:			mod_tags
		Sample:			<div class="pd-10 tags"><a href="http://www.h-ui.net/">H-ui前端框架</a>……</div>

	*/
.tags a {
    height: 26px;
    line-height: 26px;
    padding-right: 6px
}

.tags0 {
}

.tags1 {
    color: #C00;
    font-size: 24px
}

.tags2 {
    color: #030;
    font-size: 16px
}

.tags3 {
    color: #00F
}

.tags4 {
    font-size: 16px
}

.tags5 {
    color: #C00;
    font-size: 20px
}

.tags6 {
    color: #F06;
    font-size: 20px
}

.tags7 {
    color: #030;
    font-weight: bold;
    font-size: 18px
}

.tags8 {
    color: #F06;
    font-weight: bold
}

.tags9 {
    color: #C00;
    font-weight: bold;
    font-size: 16px
}

.tags a:hover {
    color: #F00;
    text-decoration: underline
}

/*4.19.3 tag云标签*/
#tagyun {
    position: relative;
}

#tagyun a {
    position: absolute;
    top: 0;
    left: 0;
    font-weight: bold;
    text-decoration: none;
    padding: 3px 6px;
}

/*4.20 折叠
	Name:			mod_Huifold
	Sample:
	<ul id="" class="Huifold">
	  <li class="item"><h4>标题<b>+</b></h4><div class="info">内容 </div></li>
	  ……
	</ul>
*/
.Huifold .item {
    position: relative;
}

.Huifold .item h4 {
    margin: 0;
    font-weight: bold;
    position: relative;
    border-top: 1px solid #fff;
    font-size: 15px;
    line-height: 22px;
    padding: 7px 10px;
    background-color: #eee;
    cursor: pointer;
    padding-right: 30px;
}

.Huifold .item h4 b {
    position: absolute;
    display: block;
    cursor: pointer;
    right: 10px;
    top: 7px;
    width: 16px;
    height: 16px;
    text-align: center;
    color: #666
}

.Huifold .item .info {
    display: none;
    padding: 10px
}

/*4.21 遮罩条
	Name:			mod_maskBar
*/
.maskBar {
    position: absolute;
    height: auto;
    left: 0;
    bottom: -100%;
    right: 0;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2;
    color: #fff !important
}

.maskWraper {
    position: relative;
    overflow: hidden
}

.maskWraper.hover .maskBar {
    bottom: 0px;
    transition: bottom 200ms;
    -moz-transition: bottom 200ms; /* Firefox 4 */
    -webkit-transition: bottom 200ms; /* Safari 和 Chrome */
    -o-transition: bottom 200ms; /* Opera */
}

.maskBox {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 2;
    color: #fff !important
}

.maskWraper.hover .maskBox {
    background-color: rgba(0, 0, 0, 0.6);
    transition: all 500ms;
    -moz-transition: all 500ms; /* Firefox 4 */
    -webkit-transition: all 500ms; /* Safari 和 Chrome */
    -o-transition: all 500ms; /* Opera */
}

/*4.22 评论列表
	Name:			mod_comment
	Sample:
	<ul class="commentList">
	  <li class="item clearfix">
	    <a href="#"><i class="avatar avatar-L radius"><img alt="" src="static/h-ui/images/ucenter/avatar-default.jpg"></i></a>
		<div class="comment-main">
		  <header class="comment-header">
		    <div class="comment-meta"><a class="comment-author" href="#">辉哥</a> 评论于 <time title="2014年8月31日 下午3:20" datetime="2014-08-31T03:54:20">2014-8-31 15:20</time></div>
	      </header>
		  <div class="comment-body"><p><a href="#">@某人</a> 你是猴子派来的救兵吗？</p></div></div>
	  </li>
	</ul>
*/
.commentList .item {
    list-style: none outside none;
    margin: 1.6rem 0 0;
    padding-right: 64px;
}

.commentList .avatar {
    border: 1px solid transparent;
    float: left
}

.comment-main {
    position: relative;
    margin-left: 64px;
    border: 1px solid #dedede;
    border-radius: 2px
}

.comment-main:before,
.comment-main:after {
    position: absolute;
    top: 11px;
    left: -16px;
    right: 100%;
    width: 0;
    height: 0;
    display: block;
    content: " ";
    border-color: transparent;
    border-style: solid solid outset;
    pointer-events: none
}

.comment-main:before {
    border-right-color: #dedede;
    border-width: 8px
}

.comment-main:after {
    border-width: 7px;
    border-right-color: #f8f8f8;
    margin-top: 1px;
    margin-left: 2px
}

.comment-header {
    padding: 10px 15px;
    background: #f8f8f8;
    border-bottom: 1px solid #eee
}

.comment-title {
    margin: 0 0 8px 0;
    font-size: 1.6rem;
    line-height: 1.2
}

.comment-meta {
    font-size: 13px;
    color: #999;
    line-height: 1.2
}

.comment-meta a {
    color: #999
}

.comment-author {
    font-weight: 700;
    color: #999
}

.comment-body {
    padding: 15px;
    overflow: hidden
}

.comment-body > :last-child {
    margin-bottom: 0
}

.commentList .item.comment-flip {
    padding-left: 64px;
    padding-right: 0;
}

.commentList .item.comment-flip .avatar {
    float: right
}

.comment-flip .comment-main {
    margin-left: 0;
    margin-right: 64px
}

.comment-flip .comment-main:before {
    border-left-color: #dedede;
    border-right-color: transparent
}

.comment-flip .comment-main:before,
.comment-flip .comment-main:after {
    left: 100%;
    position: absolute;
    right: -16px
}

.comment-flip .comment-main:after {
    border-left-color: #f8f8f8;
    border-right-color: transparent;
    margin-left: auto;
    margin-right: 2px
}

/*4.23 页脚
	Name:			mod_footer
	Sample:
<footer class="footer mt-20">
  <div class="container">
    <nav class="footer-nav">
      <a target="_blank" href="/aboutHui.html">关于H-ui</a>
      <span class="pipe">|</span>
      <a target="_blank" href="/copyright.html">软件著作权</a>
      <span class="pipe">|</span>
      <a target="_blank" href="/juanzeng.html">感谢捐赠</a>
    </nav>
    <p>Copyright &copy;2013-2016 H-ui.net All Rights Reserved. <br>
    <a rel="nofollow" target="_blank" href="http://www.miitbeian.gov.cn/">京ICP备10000000号</a><br>
    未经允许，禁止转载、抄袭、镜像</p>
  </div>
</footer>
*/
.footer {
    border-top: 1px solid #E8E8E8;
    padding: 15px 0;
    font-family: tahoma, Arial;
    font-size: 12px;
    color: #999;
    line-height: 22px;
    text-align: center
}

.footer a, .footer a:hover {
    color: #999
}

/*4.24 星星评价
	Name:			mod_star
	Sample:
显示分数效果 可以是百分比
<div class="star-bar star-bar-show size-M">
	<span class="star" style="width:75%"></span>
</div>

打分效果 结构是js生成。
<div id="" class="star-bar size-M "></div>
*/
.star-bar-show {
    background: url(../images/star/iconpic-star-S-default.png) repeat-x 0 0
}

.star-bar-show .star {
    background: url(../images/star/iconpic-star-S.png) repeat-x 0 0
}

.star-1 {
    width: 20%
}

.star-2 {
    width: 40%
}

.star-3 {
    width: 60%
}

.star-4 {
    width: 80%
}

.star-5 {
    width: 100%
}

.star-bar-show.size-M {
    width: 120px;
    height: 24px
}

.star-bar-show.size-M, .star-bar-show.size-M .star {
    background-size: 24px
}

.star-bar-show.size-M .star {
    height: 24px
}

.star-bar-show.size-S {
    width: 80px;
    height: 16px
}

.star-bar-show.size-S, .star-bar-show.size-S .star {
    background-size: 16px
}

.star-bar-show.size-S .star {
    height: 16px
}

.star-bar {
    font-size: 0;
    line-height: 0
}

.star-bar .star {
    display: inline-block;
    text-align: center
}

/*中*/
.size-M img {
    width: 24px;
    height: 24px
}

/*小*/
.size-S img {
    width: 16px;
    height: 16px
}

/*4.25 tooltip 效果
	Name:			mod_tooltip
*/
.tooltip {
    position: absolute;
    z-index: 1070;
    display: block;
    font-size: 12px;
    line-height: 1.4;
    visibility: visible;
    filter: alpha(opacity=0);
    opacity: 0
}

.tooltip.in {
    filter: alpha(opacity=90);
    opacity: .9
}

.tooltip.top {
    padding: 5px 0;
    margin-top: -3px
}

.tooltip.right {
    padding: 0 5px;
    margin-left: 3px
}

.tooltip.bottom {
    padding: 5px 0;
    margin-top: 3px
}

.tooltip.left {
    padding: 0 5px;
    margin-left: -3px
}

.tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background-color: #000;
    border-radius: 4px
}

.tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid
}

.tooltip.top .tooltip-arrow {
    bottom: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 5px 5px 0;
    border-top-color: #000
}

.tooltip.top-left .tooltip-arrow {
    bottom: 0;
    left: 5px;
    border-width: 5px 5px 0;
    border-top-color: #000
}

.tooltip.top-right .tooltip-arrow {
    right: 5px;
    bottom: 0;
    border-width: 5px 5px 0;
    border-top-color: #000
}

.tooltip.right .tooltip-arrow {
    top: 50%;
    left: 0;
    margin-top: -5px;
    border-width: 5px 5px 5px 0;
    border-right-color: #000
}

.tooltip.left .tooltip-arrow {
    top: 50%;
    right: 0;
    margin-top: -5px;
    border-width: 5px 0 5px 5px;
    border-left-color: #000
}

.tooltip.bottom .tooltip-arrow {
    top: 0;
    left: 50%;
    margin-left: -5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000
}

.tooltip.bottom-left .tooltip-arrow {
    top: 0;
    left: 5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000
}

.tooltip.bottom-right .tooltip-arrow {
    top: 0;
    right: 5px;
    border-width: 0 5px 5px;
    border-bottom-color: #000
}

/*4.26 popover 效果
	Name:     mod_popover
*/
.popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1060;
    display: none;
    max-width: 276px;
    padding: 1px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857143;
    text-align: left;
    white-space: normal;
    background-color: #fff;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .2);
    border-radius: 6px;
    -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
    box-shadow: 0 5px 10px rgba(0, 0, 0, .2)
}

.popover.top {
    margin-top: -10px
}

.popover.right {
    margin-left: 10px
}

.popover.bottom {
    margin-top: 10px
}

.popover.left {
    margin-left: -10px
}

.popover-title {
    padding: 8px 14px;
    margin: 0;
    font-size: 14px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    border-radius: 5px 5px 0 0
}

.popover-content {
    padding: 9px 14px
}

.popover > .arrow, .popover > .arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid
}

.popover > .arrow {
    border-width: 11px
}

.popover > .arrow:after {
    content: "";
    border-width: 10px
}

.popover.top > .arrow {
    bottom: -11px;
    left: 50%;
    margin-left: -11px;
    border-top-color: #999;
    border-top-color: rgba(0, 0, 0, .25);
    border-bottom-width: 0
}

.popover.top > .arrow:after {
    bottom: 1px;
    margin-left: -10px;
    content: " ";
    border-top-color: #fff;
    border-bottom-width: 0
}

.popover.right > .arrow {
    top: 50%;
    left: -11px;
    margin-top: -11px;
    border-right-color: #999;
    border-right-color: rgba(0, 0, 0, .25);
    border-left-width: 0
}

.popover.right > .arrow:after {
    bottom: -10px;
    left: 1px;
    content: " ";
    border-right-color: #fff;
    border-left-width: 0
}

.popover.bottom > .arrow {
    top: -11px;
    left: 50%;
    margin-left: -11px;
    border-top-width: 0;
    border-bottom-color: #999;
    border-bottom-color: rgba(0, 0, 0, .25)
}

.popover.bottom > .arrow:after {
    top: 1px;
    margin-left: -10px;
    content: " ";
    border-top-width: 0;
    border-bottom-color: #fff
}

.popover.left > .arrow {
    top: 50%;
    right: -11px;
    margin-top: -11px;
    border-right-width: 0;
    border-left-color: #999;
    border-left-color: rgba(0, 0, 0, .25)
}

.popover.left > .arrow:after {
    right: 1px;
    bottom: -10px;
    content: " ";
    border-right-width: 0;
    border-left-color: #fff
}

/*4.27 datetimepicker日期插件
	Name:     mod_datetimepicker
	Sample:   <input type="text" class="input-text datetimepicker-input" value="" autocomplete="off" id="datetimepicker" name="datetimepicker">
*/
.datetimepicker-input {
    background: #fff url(../images/datetimepicker/datetimepicker.gif) no-repeat right;
    padding-right: 20px;
    box-sizing: border-box;
}

.datetimepicker-input::-ms-clear {
    display: none;
}

.datetimepicker {
    padding: 4px;
    margin-top: 1px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    direction: ltr;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    font-size: 14px;
    list-style: none;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
}

.datetimepicker-inline {
    width: 220px;
}

.datetimepicker.datetimepicker-rtl {
    direction: rtl;
}

.datetimepicker.datetimepicker-rtl table tr td span {
    float: right;
}

.datetimepicker-dropdown,
.datetimepicker-dropdown-left {
    top: 0;
    left: 0;
}

[class*=" datetimepicker-dropdown"]:before {
    content: '';
    display: inline-block;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ccc;
    border-bottom-color: rgba(0, 0, 0, 0.2);
    position: absolute;
}

[class*=" datetimepicker-dropdown"]:after {
    content: '';
    display: inline-block;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
    position: absolute;
}

[class*=" datetimepicker-dropdown-top"]:before {
    content: '';
    display: inline-block;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 7px solid #ccc;
    border-top-color: rgba(0, 0, 0, 0.2);
    border-bottom: 0;
}

[class*=" datetimepicker-dropdown-top"]:after {
    content: '';
    display: inline-block;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #fff;
    border-bottom: 0;
}

.datetimepicker-dropdown-bottom-left:before {
    top: -7px;
    right: 6px
}

.datetimepicker-dropdown-bottom-left:after {
    top: -6px;
    right: 7px
}

.datetimepicker-dropdown-bottom-right:before {
    top: -7px;
    left: 6px
}

.datetimepicker-dropdown-bottom-right:after {
    top: -6px;
    left: 7px
}

.datetimepicker-dropdown-top-left:before {
    bottom: -7px;
    right: 6px
}

.datetimepicker-dropdown-top-left:after {
    bottom: -6px;
    right: 7px
}

.datetimepicker-dropdown-top-right:before {
    bottom: -7px;
    left: 6px
}

.datetimepicker-dropdown-top-right:after {
    bottom: -6px;
    left: 7px
}

.datetimepicker > div {
    display: none
}

.datetimepicker.minutes div.datetimepicker-minutes,
.datetimepicker.hours div.datetimepicker-hours,
.datetimepicker.days div.datetimepicker-days,
.datetimepicker.months div.datetimepicker-months,
.datetimepicker.years div.datetimepicker-years {
    display: block;
}

.datetimepicker table {
    margin: 0
}

.datetimepicker td,
.datetimepicker th {
    text-align: center;
    width: 20px;
    height: 20px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: none;
}

.table-striped .datetimepicker table tr td,
.table-striped .datetimepicker table tr th {
    background-color: transparent;
}

.datetimepicker table tr td.minute:hover,
.datetimepicker table tr td.hour:hover,
.datetimepicker table tr td.day:hover {
    background: #eee;
    cursor: pointer;
}

.datetimepicker table tr td.old,
.datetimepicker table tr td.new {
    color: #999;
}

.datetimepicker table tr td.disabled,
.datetimepicker table tr td.disabled:hover {
    background: none;
    color: #999;
    cursor: default;
}

.datetimepicker table tr td.today,
.datetimepicker table tr td.today:hover,
.datetimepicker table tr td.today.disabled,
.datetimepicker table tr td.today.disabled:hover {
    background-color: #fde19a;
    background-image: -moz-linear-gradient(top, #fdd49a, #fdf59a);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fdd49a), to(#fdf59a));
    background-image: linear-gradient(top, #fdd49a, #fdf59a);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fdd49a', endColorstr='#fdf59a', GradientType=0);
    border-color: #fdf59a #fdf59a #fbed50;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false)
}

.datetimepicker table tr td.today:hover,
.datetimepicker table tr td.today:active,
.datetimepicker table tr td.today.disabled,
.datetimepicker table tr td.today.disabled:hover,
.datetimepicker table tr td.today.disabled:active,
.datetimepicker table tr td.today.active,
.datetimepicker table tr td.today.active:hover,
.datetimepicker table tr td.today.disabled.active,
.datetimepicker table tr td.today.disabled.active:hover,
.datetimepicker table tr td.today[disabled],
.datetimepicker table tr td.today:hover[disabled],
.datetimepicker table tr td.today.disabled[disabled],
.datetimepicker table tr td.today.disabled:hover[disabled] {
    background-color: #fdf59a
}

.datetimepicker table tr td.active,
.datetimepicker table tr td.active:hover,
.datetimepicker table tr td.active.disabled,
.datetimepicker table tr td.active.disabled:hover {
    background-color: #006dcc;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc));
    background-image: linear-gradient(top, #0088cc, #0044cc);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0088cc', endColorstr='#0044cc', GradientType=0);
    border-color: #0044cc #0044cc #002a80;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    color: #fff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25)
}

.datetimepicker table tr td.active:active,
.datetimepicker table tr td.active:hover,
.datetimepicker table tr td.active.disabled:active,
.datetimepicker table tr td.active.disabled:hover,
.datetimepicker table tr td.active.active,
.datetimepicker table tr td.active:hover.active,
.datetimepicker table tr td.active.disabled.active,
.datetimepicker table tr td.active.disabled:hover.active {
    background-color: #039;
    color: #fff;
}

.datetimepicker table tr td span {
    display: block;
    width: 23%;
    height: 54px;
    line-height: 54px;
    float: left;
    margin: 1%;
    cursor: pointer;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

.datetimepicker .datetimepicker-hours span {
    height: 26px;
    line-height: 26px
}

.datetimepicker .datetimepicker-hours table tr td span.hour_am,
.datetimepicker .datetimepicker-hours table tr td span.hour_pm {
    width: 14.6%
}

.datetimepicker .datetimepicker-hours fieldset legend,
.datetimepicker .datetimepicker-minutes fieldset legend {
    margin-bottom: inherit;
    line-height: 30px
}

.datetimepicker .datetimepicker-minutes span {
    height: 26px;
    line-height: 26px
}

.datetimepicker table tr td span:hover {
    background: #eee
}

.datetimepicker table tr td span.disabled,
.datetimepicker table tr td span.disabled:hover {
    background: none;
    color: #999;
    cursor: default
}

.datetimepicker table tr td span.active,
.datetimepicker table tr td span.active:hover,
.datetimepicker table tr td span.active:active,
.datetimepicker table tr td span.active.disabled:hover,
.datetimepicker table tr td span.active.disabled:active,
.datetimepicker table tr td span.active[disabled],
.datetimepicker table tr td span.active:hover[disabled],
.datetimepicker table tr td span.active.disabled[disabled],
.datetimepicker table tr td span.active.disabled:hover[disabled] {
    background-color: #039;
    color: #fff;
}

.datetimepicker table tr td span.old {
    color: #999
}

.datetimepicker th.switch {
    width: 145px
}

.datetimepicker th span.glyphicon {
    pointer-events: none
}

.datetimepicker thead tr:first-child th,
.datetimepicker tfoot th {
    cursor: pointer
}

.datetimepicker thead tr:first-child th:hover,
.datetimepicker tfoot th:hover {
    background: #eee
}

.input-append.date .add-on i,
.input-prepend.date .add-on i,
.input-group.date .input-group-addon span {
    cursor: pointer;
    width: 14px;
    height: 14px;
}

.datetimepicker .icon-arrow-left,
.datetimepicker .icon-arrow-right {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    *margin-right: .3em;
    line-height: 14px;
    vertical-align: text-top;
    background-image: url(../images/datetimepicker/glyphicons-halflings.png);
    background-position: 14px 14px;
    background-repeat: no-repeat;
}

.datetimepicker .icon-arrow-left {
    background-position: -240px -96px;
}

.datetimepicker .icon-arrow-right {
    background-position: -264px -96px;
}

/*4.27 分类检索
	Name:			mod_select-category
	Sample:
<div class="select-category">
	<div class="item clearfix">
		<dl>
			<dt class="dt">选择区域：</dt>
			<dd class="dd">
        <a href="#" title="北京市">北京市</a>
      </dd>
		</dl>
	</div>
</div>
*/
.select-category .item {
    padding: 5px;
    position: relative;
    border-bottom: solid 1px #ddd
}

.select-category .item .dt {
    width: 90px;
    float: left;
    white-space: nowrap
}

.select-category .item .dd {
    margin-left: 100px;
    text-align: left;
    font-size: 14px;
    height: auto
}

.select-category .item .dd a {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 10px;
    padding: 0 5px;
    text-decoration: none
}

/*4.28 sortable拖动*/
.ui-state-highlight {
    height: 50px;
    margin-top: 20px;
    border: 1px solid #fcefa1;
    background: #fbf9ee;
    color: #363636
}

.sortable-control {
    cursor: move
}

/*4.29 ColorPicker 颜色控件*/


/*5 页面
	Name:    page
*/

/*5.1 错误页*/
.page-error {
    color: #afb5bf;
    padding-top: 60px;
    padding-bottom: 90px;
}

.page-error .error-title {
    font-size: 80px;
}

.page-error .error-title .iconfont {
    font-size: 80px;
}

.page-error .error-description {
    font-size: 24px;
}

.page-error .error-info {
    font-size: 14px;
}

/*5.2 博客列表页*/
.page-blog-list {
}

/*5.3 博客详情页*/
.page-blog-show {
}

/*5.4 关于我们页*/
.page-about-show {
}

/*5.5 帮助列表页*/
.page-help-list {
}

/*5.6 帮助详情页*/
.page-help-show {
}

/*5.7 友情链接页*/
.page-flink {
}
